Layout

Flexboxレイアウト

柔軟なレイアウト設計とレスポンシブ対応

flex-direction
flex-row と flex-col で方向を制御

flex-row（横並び）

1
2
3

flex-col（縦並び）

1
2
3
justify-content
主軸方向の配置を制御

justify-start

1
2
3

justify-center

1
2
3

justify-end

1
2
3

justify-between

1
2
3

justify-around

1
2
3

justify-evenly

1
2
3
align-items
交差軸方向の配置を制御

items-start

1
2
3

items-center

1
2
3

items-end

1
2
3

items-stretch

1
2
3
flex-wrap とレスポンシブ
折り返しとブレークポイント対応

flex-wrap（折り返しあり）

1
2
3
4
5
6
7
8

レスポンシブ: sm:flex-row（モバイルは縦、タブレット以上は横）

1
2
3
Next Steps
次のステップ

CSS Grid レイアウトも学んでみましょう。

カタログを見る