CSS レッスン3
Flexboxレイアウト
要素を横並びや中央揃えにする強力なレイアウト手法を学ぼう
Flexboxとは
Flexbox（Flexible Box Layout）は、1次元のレイアウトを簡単に制御できるCSSの仕組みです。 親要素に display: flex を指定するだけで、 子要素が横並びになり、様々な配置を制御できます。
- フレックスコンテナ -
display: flexを持つ親要素 - フレックスアイテム - コンテナの直接の子要素
display: flex の基本
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
style.csslazy
27 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live Previewflex-direction
フレックスアイテムの並ぶ方向を指定します：
row（デフォルト）- 横方向（左→右）row-reverse- 横方向（右→左）column- 縦方向（上→下）column-reverse- 縦方向（下→上）
justify-content（主軸の配置）
主軸方向（横並びの場合は水平方向）のアイテム配置を制御します。値を変えて試してみましょう。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
style.csslazy
22 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live Previewalign-items（交差軸の配置）
交差軸方向（横並びの場合は垂直方向）のアイテム配置を制御します。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
style.csslazy
28 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live Previewgap / flex-wrap / flex-grow
アイテム間の余白、折り返し、伸縮を制御するプロパティです。
Monaco + Shiki / Tab でインデント / Ctrl(Cmd)+Enter で再実行
style.csslazy
47 lines0 issues
Monaco Editor を準備しています
表示領域に入った時点で Monaco と Shiki を初期化します。
preview.local
Live Previewまとめ
display: flexで子要素が横並びになるjustify-contentで主軸方向（水平）の配置を制御align-itemsで交差軸方向（垂直）の配置を制御flex-directionで並び方向を変更できるgapでアイテム間の余白、flex-wrapで折り返しを制御flex-grow/flex-shrinkでアイテムの伸縮を制御