2021-12-24 フレックスボックスの基本概念

24 December 2021

フレックスボックスの基本概念 - CSS: カスケーディングスタイルシート | MDN

通常フレックスボックスと呼ばれている Flexible Box Module は一次元のレイアウトモデルとして、またインターフェイス中のアイテム間で余白の分配をする機能と強力な位置合わせをする機能を提供するものとして設計されました。

フレックスボックスが一次元であることは、フレックスボックスが一つの次元、つまり行か列のいずれかの方向にしかレイアウトしないことを述べています。これは CSS グリッドレイアウトが行と列の二次元を同時に制御するモデルであることと対照的です。

フレックスボックスを使うときは 2 つの軸、つまり主軸 (main axis) と交差軸 (cross axis) の観点から考える必要があります。主軸は flex-direction プロパティによって定義され、交差軸は主軸に垂直に交わる軸です。

flex 一括指定プロパティは、flex-grow、flex-shrink、flex-basis の順に 3 つの値を設定することができます。

/* flex: {flex-grow} {flex-shrink} {flex-basis} */
.one {
  flex: 1 1 auto;
}

align-items プロパティは、交差軸におけるアイテムの位置合わせを行います。

justify-content プロパティは、主軸におけるアイテムの配置、つまり flex-direction で設定された方向における位置合わせを行います。