CSS3 Flexbox アイテム

Flex コンテナの直接の子要素は、自動的に Flex アイテム（Flex Items） となります。本セクションでは、子要素側に直接指定することで、その挙動を個別に制御するためのプロパティを解説します。

1. order プロパティ

order プロパティは、Flex アイテムの表示順序を指定します。

HTML コード上での記述順に関わらず、このプロパティに数値を指定することで自由に並べ替えることが可能です。デフォルト値は 0 です。

.flex-item-1 {
  /* 最初の要素を3番目に表示 */
  order: 3;
}

.flex-item-2 {
  /* 2番目の要素を2番目に表示 */
  order: 2;
}

.flex-item-3 {
  /* 3番目の要素を1番目に表示 */
  order: 1;
}

2. flex-grow プロパティ

flex-grow プロパティは、他の Flex アイテムと比較して、そのアイテムがどれだけ伸長（グロウ）するかを比率で指定します。

デフォルト値は 0 です。値を指定すると、コンテナ内の余白をその比率に応じて分配し、要素を広げます。

2.1 伸長比率の指定例

以下の例では、2番目のアイテムが他のアイテムよりも多くのスペースを占有するように設定しています。

.flex-item-1 {
  flex-grow: 1;
}

.flex-item-2 {
  /* 他のアイテムの8倍の比率で伸びる */
  flex-grow: 8;
}

.flex-item-3 {
  flex-grow: 1;
}

3. flex-shrink プロパティ

flex-shrink プロパティは、他の Flex アイテムと比較して、そのアイテムがどれだけ収縮（シュリンク）するかを比率で指定します。

コンテナの幅が不足した場合に、どの要素を優先的に小さくするかを制御します。デフォルト値は 1 です。

3.1 収縮比率の指定例

以下の例では、2番目のアイテムが他のアイテムよりも大きく縮むように設定しています。

.flex-item-2 {
  /* 他のアイテムよりも3倍縮みやすくなる */
  flex-shrink: 3;
}

4. flex-basis プロパティ

flex-basis プロパティは、Flex アイテムの初期サイズ（ベースサイズ）を指定します。

width プロパティに似ていますが、Flexbox の軸の方向に依存します。

.flex-item-3 {
  /* 初期幅を200pxに設定 */
  flex-basis: 200px;
}

5. flex ショートハンドプロパティ

flex は、flex-grow、flex-shrink、および flex-basis を一括で指定するためのショートハンドプロパティです。

5.1 flex の構文

推奨される記述方法であり、個別に指定するよりもコードを簡潔に保てます。

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

6. align-self プロパティ

align-self プロパティを使用すると、親コンテナで指定された align-items の設定を上書きし、特定のアイテムに対してのみ個別の整列を適用できます。

6.1 align-self の指定例

以下の例では、特定のアイテムだけ配置場所を変更しています。

.flex-item-1 {
  /* このアイテムだけ上端に整列 */
  align-self: flex-start;
}

.flex-item-2 {
  /* このアイテムだけ中央に整列 */
  align-self: center;
}

.flex-item-3 {
  /* このアイテムだけ下端に整列 */
  align-self: flex-end;
}

7. Flex アイテムプロパティ一覧