CSS Flexbox コンテナ

Flexbox を使用する際は、まず親要素を Flex コンテナ（Flex Container） として定義する必要があります。本セクションでは、コンテナに対して指定可能な主要プロパティを解説します。

1. display プロパティ

Flexbox を有効にするには、親要素の display プロパティに flex を指定します。

.flex-container {
  /* Flexboxコンテナとして定義 */
  display: flex;
}

2. flex-direction プロパティ

flex-direction プロパティは、コンテナがアイテムを配置する方向（メイン軸の方向）を定義します。

2.1 column

column を指定すると、Flex アイテムは上から下へ垂直に配置されます。

.flex-container {
  display: flex;
  /* アイテムを垂直方向に配置 */
  flex-direction: column;
}

2.2 column-reverse

column-reverse を指定すると、Flex アイテムは下から上へ逆順に垂直配置されます。

.flex-container {
  display: flex;
  /* アイテムを下から上へ配置 */
  flex-direction: column-reverse;
}

2.3 row

row を指定すると、Flex アイテムは左から右へ水平に配置されます。これはデフォルトの設定です。

.flex-container {
  display: flex;
  /* アイテムを左から右へ水平に配置 */
  flex-direction: row;
}

2.4 row-reverse

row-reverse を指定すると、Flex アイテムは右から左へ逆順に水平配置されます。

.flex-container {
  display: flex;
  /* アイテムを右から左へ配置 */
  flex-direction: row-reverse;
}

3. flex-wrap プロパティ

flex-wrap プロパティは、Flex アイテムを 1 行に収めるか、あるいは複数行に折り返すかを指定します。

3.1 nowrap

nowrap を指定すると、アイテムは折り返されず、コンテナからはみ出すか、縮小して 1 行に収まろうとします。これはデフォルトの設定です。

.flex-container {
  display: flex;
  /* 折り返しなし */
  flex-wrap: nowrap;
}

3.2 wrap

wrap を指定すると、アイテムがコンテナの幅を超えた場合に、自動的に次の行へ折り返されます。

.flex-container {
  display: flex;
  /* 必要に応じて折り返す */
  flex-wrap: wrap;
}

3.3 wrap-reverse

wrap-reverse を指定すると、アイテムは必要に応じて逆順の行（上方向）へ折り返されます。

.flex-container {
  display: flex;
  /* 逆順で折り返す */
  flex-wrap: wrap-reverse;
}

4. flex-flow プロパティ

flex-flow は、flex-direction と flex-wrap を一括で指定するためのショートハンドプロパティです。

.flex-container {
  display: flex;
  /* 方向をrow、折り返しをwrapに設定 */
  flex-flow: row wrap;
}

5. justify-content プロパティ

justify-content プロパティは、メイン軸（水平方向など）に沿ったアイテムの整列方法を定義します。

5.1 center

center を指定すると、アイテムはコンテナの中央に整列します。

.flex-container {
  display: flex;
  /* 水平方向の中央揃え */
  justify-content: center;
}

5.2 flex-start

flex-start を指定すると、アイテムはコンテナの先頭（デフォルト）に整列します。

.flex-container {
  display: flex;
  /* コンテナの先頭に寄せる */
  justify-content: flex-start;
}

5.3 flex-end

flex-end を指定すると、アイテムはコンテナの末尾に整列します。

.flex-container {
  display: flex;
  /* コンテナの末尾に寄せる */
  justify-content: flex-end;
}

5.4 space-between

space-between を指定すると、最初と最後のアイテムが両端に配置され、その間のアイテムは等間隔に配置されます。

.flex-container {
  display: flex;
  /* 両端揃え、間隔は均等 */
  justify-content: space-between;
}

5.5 space-around

space-around を指定すると、各アイテムの周囲に均等なスペースが配置されます。

.flex-container {
  display: flex;
  /* 各アイテムの周りに余白を持たせる */
  justify-content: space-around;
}

6. align-items プロパティ

align-items プロパティは、交差軸（垂直方向など）に沿ったアイテムの整列方法を定義します。

6.1 center

center を指定すると、アイテムは垂直方向の中央に配置されます。

.flex-container {
  display: flex;
  height: 200px;
  /* 垂直方向の中央揃え */
  align-items: center;
}

6.2 flex-start

flex-start を指定すると、アイテムはコンテナの上端（交差軸の開始位置）に整列します。

.flex-container {
  display: flex;
  height: 200px;
  /* コンテナの上端に寄せる */
  align-items: flex-start;
}

6.3 flex-end

flex-end を指定すると、アイテムはコンテナの下端（交差軸の終了位置）に整列します。

.flex-container {
  display: flex;
  height: 200px;
  /* コンテナの下端に寄せる */
  align-items: flex-end;
}

6.4 stretch

stretch を指定すると、アイテムはコンテナの高さに合わせて引き伸ばされます（アイテムに高さ指定がない場合）。これはデフォルトの設定です。

.flex-container {
  display: flex;
  height: 200px;
  /* コンテナの高さ一杯に引き伸ばす */
  align-items: stretch;
}

6.5 baseline

baseline を指定すると、各アイテムのテキストのベースライン（フォントの基準線）に合わせて整列します。

.flex-container {
  display: flex;
  /* テキストの基準線で揃える */
  align-items: baseline;
}

7. align-content プロパティ

align-content プロパティは、コンテナ内に複数行（複数ライン）のアイテムがある場合に、それらの行をどのように整列させるかを指定します。

注意: このプロパティは flex-wrap: wrap; などによってアイテムが複数行に分かれている場合にのみ機能します。

7.1 center

複数行のラインをコンテナの垂直方向中央にまとめます。

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  /* 行全体を中央に寄せる */
  align-content: center;
}

7.2 space-between

最初と最後の行を両端に配置し、中間の行を等間隔で配置します。

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  /* 行を上下に振り分け */
  align-content: space-between;
}

7.3 space-around

各行の周囲に均等なスペースを配置します。

.flex-container {
  display: flex;
  height: 400px;
  flex-wrap: wrap;
  /* 各行の周りに均等な余白 */
  align-content: space-around;
}

8. パーフェクト・センタリング (Perfect Centering)

Flexbox の最も強力な活用例の一つが、要素の完全な中央揃えです。justify-content と align-items を両方とも center に設定することで、水平・垂直の両方で完璧な中央配置を実現できます。

.flex-container {
  display: flex;
  height: 300px;
  /* 水平方向中央 */
  justify-content: center;
  /* 垂直方向中央 */
  align-items: center;
}