CSS Flexboxとは？
CSS Flexbox（フレキシブルボックスレイアウト）は、コンテナ内のアイテム間にスペースを分配する一次元レイアウトモデルです。主軸と交差軸に沿った要素の配置、順序、サイズ変更を簡素化し、フロートやポジショニングなしでレスポンシブレイアウトを構築できます。
主要なFlexboxプロパティ
- flex-direction：主軸の方向を設定（row、column、またはそれぞれの逆方向）。
- flex-wrap：アイテムが新しい行に折り返すかどうかを制御。
- justify-content：主軸に沿ってアイテムを配置。
- align-items：交差軸に沿ってアイテムを配置。
- gap：マージンなしでFlexアイテム間のスペースを設定。
よくある質問
FlexboxとGridのどちらを使うべきですか？
一次元レイアウト（アイテムの単一の行または列）にはFlexboxを使用します。行と列の両方を同時に制御する二次元レイアウトにはCSS Gridを使用します。
Flexboxはすべてのブラウザで使えますか？
はい。CSS FlexboxはChrome、Firefox、Safari、Edgeなどすべてのモダンブラウザで対応しています。ベンダープレフィックスは不要です。