ホームページ > 記事 > ウェブフロントエンド > グリッドとフレックスボックス
グリッドとフレックスボックス
- 王林オリジナル
- 2024-09-10 18:00:09748ブラウズ
Grid と Flexbox はどちらも CSS の強力なレイアウト システムであり、それぞれがさまざまな種類のレイアウト タスク向けに設計されています。以下に 2 つの比較と、その違いを示す例を示します。
フレックスボックス
目的:
Flexbox は 1 次元レイアウト用に設計されています。単一の軸 (行または列) に沿った項目の配置と間隔を処理します。
主な機能:
- アイテムを水平方向または垂直方向に整列させます。
- コンテナ内のスペースを分配します。
- アイテムの順序とサイズを柔軟に制御します。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Flexbox Example</title>
<style>
.container {
display: flex;
justify-content: space-between; /* Distributes space between items */
align-items: center; /* Aligns items vertically in the center */
height: 100vh;
background-color: lightgrey;
}
.item {
background-color: dodgerblue;
color: white;
padding: 20px;
text-align: center;
flex: 1; /* Makes items flexible */
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
図解された機能:
- 項目は間隔をあけて 1 列に配置されます。
- アイテムはコンテナ内で垂直方向の中央に配置されます。
- アイテムは利用可能なスペースに基づいて拡大または縮小します。
グリッド
目的:
グリッドは 2 次元レイアウト用に設計されています。行と列の両方を同時に処理できるため、複雑なレイアウトが可能です。
主な機能:
- 行と列の両方を作成します。
- グリッド内のアイテムの配置を制御します。
- 項目を複数の行と列にまたがります。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Grid Example</title>
<style>
.container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* Creates three equal-width columns */
grid-gap: 10px; /* Adds space between grid items */
height: 100vh;
background-color: lightgrey;
}
.item {
background-color: dodgerblue;
color: white;
padding: 20px;
text-align: center;
}
.item:nth-child(2) {
grid-column: span 2; /* Makes the second item span two columns */
}
</style>
</head>
<body>
<div class="container">
<div class="item">Item 1</div>
<div class="item">Item 2</div>
<div class="item">Item 3</div>
</div>
</body>
</html>
図解された機能:
- 3 つの等しい列を持つグリッドを作成します。
- アイテムは、間に隙間をあけてグリッドに配置されます。
- 2 番目の項目は 2 つの列にまたがっています。
まとめ
- フレックスボックス: 1 次元レイアウト (行または列) に最適です。アイテムの整列、スペースの配分、シンプルなレイアウトの処理に最適です。
- グリッド: 2 次元レイアウト (行と列) に最適です。正確な配置と両方の寸法の制御が必要な、より複雑なデザインに最適です。
フレックスボックスとグリッドのどちらを選択するかは、レイアウトの複雑さと、1 次元のコントロールが必要か、2 次元のコントロールが必要かによって異なります。多くの場合、両方を一緒に使用して目的のレイアウトを実現できます。
以上がグリッドとフレックスボックスの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。
声明：
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。