Flexコンテナとアイテムの基本構造

Flexコンテナ（flex container）は、子要素を「Flexアイテム」として管理するためのレイアウトコンテナです。コンテナにdisplay: flexを適用することで、直下のすべての要素がFlexアイテムとして扱われます。

コンテナ側の設定プロパティ

1. メイン軸方向の設定（flex-direction）

flex-directionでメイン軸の方向を指定します。

.flex-container {
  flex-direction: row | row-reverse | column | column-reverse;
}

- row: 水平方向（左から右） - column: 垂直方向（上から下）

2. ラインブレイク制御（flex-wrap）

flex-wrapで要素が1行に収まらない場合の折り返しを制御します。

.flex-container {
  flex-wrap: nowrap | wrap | wrap-reverse;
}

- wrap-reverse: 折り返し時に行の順序が逆転

3. 縦軸方向の配置（align-items）

align-itemsでアイテムの側軸方向（縦方向）の配置を設定します。

.flex-container {
  align-items: flex-start | center | flex-end | stretch;
}

アイテム側の設定プロパティ

1. 表示順序の変更（order）

orderでアイテムの表示順を数値で指定します。

.flex-item {
  order: 2; /* デフォルトは0 */
}

2. 拡張比率の設定（flex-grow）

flex-growで余剰スペースを比率で分配します。

.flex-item {
  flex-grow: 1; /* デフォルトは0 */
}

例: コンテナ幅600px、アイテム1のベース幅100px、アイテム2が200px、アイテム3が150pxの場合、残り150pxを1:2:1の比率で分配

3. 収縮比率の設定（flex-shrink）

flex-shrinkで要素が収縮する比率を指定します。

.flex-item {
  flex-shrink: 2; /* デフォルトは1 */
}

例: コンテナ幅300px、合計ベース幅700pxの場合、余剰400pxを各アイテムが指定した比率で吸収

4. ベース幅の指定（flex-basis）

flex-basisで要素の初期幅を設定します。

.flex-item {
  flex-basis: 150px; /* デフォルトはauto */
}

widthと競合する場合、flex-basisが優先されます。

5. 簡易設定（flex）

flexはflex-grow、flex-shrink、flex-basisのショートハンドです。

.flex-item {
  flex: 1 0 200px; /* grow:1, shrink:0, basis:200px */
}

- auto: 1 1 auto - none: 0 0 auto

6. 個別配置のオーバーライド（align-self）

align-selfで個別のアイテムに対して側軸方向の配置を上書きできます。

.flex-item {
  align-self: flex-end;
}

margin-right: autoと組み合わせて右寄せを実現できます。