フレックスボックスとグリッドレイアウト

1. フレックスボックスの基本

display: flex を指定するだけで、子要素が横一列に並び、高さが揃います。

アイテム1

アイテム2

アイテム3

2. flex-wrap で折り返しを指定

flex-wrap: wrap を指定すると、アイテムが折り返されます。

アイテム1

アイテム2

アイテム3

アイテム4

アイテム5

アイテム6

3. flex プロパティ: 割合値

flex プロパティでアイテムの伸び縮みの割合を設定できます。

flex: 1

flex: 2

4. flex プロパティ: 最小サイズ

flex に最小サイズを指定することもできます。

flex: 1 150px

flex: 2 150px

5. justify-content: 水平方向の配置

flex-start（左寄せ）

1

2

3

flex-end（右寄せ）

1

2

3

center（中央寄せ）

1

2

3

space-between（両端配置）

1

2

3

space-around（均等スペース）

1

2

3

6. align-items: 垂直方向の配置

stretch（高さを揃える）

1

2

3

flex-start（上寄せ）

1

2

3

flex-end（下寄せ）

1

2

3

center（上下中央）

1

2

3

7. 中央配置の例

justify-content: center と align-items: center を組み合わせると、アイテムがど真ん中に配置されます。

中央に配置

8. flex-direction: 並ぶ方向を変更

row（横方向・既定値）

1

2

3

column（縦方向）

1

2

3

9. グリッドレイアウトの基本

display: grid と grid-template-columns で列を定義します。

10. fr 単位を使った柔軟なグリッド

1fr 1fr 1fr（3等分）

1

2

3

2fr 1fr 1fr（2:1:1の比率）

1

2

3

11. repeat() で繰り返し指定

repeat(3, 1fr) は 1fr 1fr 1fr と同じ意味です。

1

2

3

4

5

6

12. gap でトラック間隔を指定

gap プロパティで行と列の間隔を指定できます。

1

2

3

4

5

6

フレックスボックスとグリッドレイアウト - デモ