CSS Flexbox (フレックスボックス)

Flexbox レイアウトモジュール（Flexible Box Layout Module）が登場する前、Web レイアウトには主に 4 つのモードが存在していました。

• Block: セクションなどのブロック要素用。
• Inline: テキストなどのインライン要素用。
• Table: 2 次元のテーブルデータ用。
• Positioned: 要素の絶対位置指定用。

Flexbox レイアウトモジュールを使用すると、要素をフロート（Float）やポジショニング（Positioning）を使わずに、予測可能な形で柔軟に配置、整列、およびスペース分配を行うことが容易になります。

1. Flexbox の基本コンセプト

Flexbox を使用するには、まず Flex コンテナ（Flex Container）を定義する必要があります。

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
</div>

Flex コンテナを作成するには、要素の display プロパティに flex を設定します。

.flex-container {
  display: flex;
  background-color: DodgerBlue;
}

.flex-container > div {
  background-color: #f1f1f1;
  margin: 10px;
  padding: 20px;
  font-size: 30px;
}

2. Flex コンテナ (Parent) のプロパティ

Flex コンテナ（親要素）には、以下のプロパティを適用してレイアウトを制御できます。

2.1 flex-direction

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

• column: アイテムを上から下へ垂直に配置します。
• column-reverse: アイテムを下から上へ垂直に配置します。
• row: アイテムを左から右へ水平に配置します（デフォルト）。
• row-reverse: アイテムを右から左へ水平に配置します。

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

2.2 flex-wrap

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

• nowrap: アイテムを折り返さず、1 行に収めます（デフォルト）。
• wrap: 必要に応じてアイテムを複数行に折り返します。
• wrap-reverse: アイテムを逆順で複数行に折り返します。

.flex-container {
  display: flex;
  /* コンテナの幅を超えた場合に折り返す */
  flex-wrap: wrap;
}

2.3 flex-flow

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

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

2.4 justify-content

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

• flex-start: コンテナの先頭に整列（デフォルト）。
• flex-end: コンテナの末尾に整列。
• center: コンテナの中央に整列。
• space-between: 最初と最後のアイテムを両端に配置し、等間隔に配置。
• space-around: アイテムの周囲に均等なスペースを配置。

.flex-container {
  display: flex;
  /* 中央揃え */
  justify-content: center;
}

2.5 align-items

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

• stretch: コンテナの高さに合わせてアイテムを引き伸ばす（デフォルト）。
• flex-start: コンテナの上端に整列。
• flex-end: コンテナの下端に整列。
• center: 垂直方向の中央に整列。
• baseline: テキストのベースラインに合わせて整列。

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

2.6 align-content

align-content プロパティは、複数行がある場合の行自体の整列方法を指定します（flex-wrap: wrap; が必要です）。

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

3. Flex アイテム (Children) のプロパティ

Flex コンテナの直接の子要素（Flex アイテム）には、以下のプロパティを適用できます。

3.1 order

order プロパティは、Flex アイテムの表示順序を指定します。デフォルト値は 0 です。

/* 2番目の要素を最初に表示させる例 */
.flex-item-2 {
  order: -1;
}

3.2 flex-grow

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

/* 2番目のアイテムだけ他より大きく広がる */
.flex-item-2 {
  flex-grow: 2;
}

3.3 flex-shrink

flex-shrink プロパティは、他のアイテムと比較して、そのアイテムがどれだけ収縮するかを指定します。

3.4 flex-basis

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

3.5 flex

flex は、flex-grow、flex-shrink、および flex-basis を一括で指定するショートハンドです。

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

3.6 align-self

align-self プロパティを使用すると、特定のアイテムに対してのみ align-items の設定を上書きできます。

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

4. Flexbox プロパティ一覧