メインコンテンツまでスキップ

Flexboxの基礎

フレックスコンテナ​

フレックスコンテナ(flex container) は、display: flex または display: inline-flex を設定した要素です。 この要素が Flexbox レイアウトの親要素となります。 フレックスコンテナの直接の子要素は、フレックスアイテム(flex item) と呼ばれます。

<div class="flex-container">
  <div>フレックスアイテム 1</div>
  <div>フレックスアイテム 2</div>
  <div>フレックスアイテム 3</div>
</div>
CSS
.flex-container {
  display: flex;
}
フレックスアイテム 1
フレックスアイテム 2
フレックスアイテム 3

軸 Axis​

Flexbox では、要素の配置を制御するために「軸」を使用します。主軸 と 交差軸 の2つがあります。

  • 主軸(main axis) は、フレックスアイテムが配置される方向に走る軸です。
  • 交差軸(cross axis) は、主軸に対して垂直な方向の軸です。

flexbox-axis

flex-direction​

主軸はデフォルトで水平方向（左から右）ですが、flex-direction プロパティを使用して変更できます。 4種類の値を取ることができます。

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

実際にどうなるか見てみましょう。

row: 主軸は水平方向（左から右）​

フレックスアイテム 1
フレックスアイテム 2
フレックスアイテム 3

row-reverse: 主軸は水平方向（右から左）​

フレックスアイテム 1
フレックスアイテム 2
フレックスアイテム 3

column: 主軸は垂直方向（上から下）​

フレックスアイテム 1
フレックスアイテム 2
フレックスアイテム 3

column-reverse: 主軸は垂直方向（下から上）​

フレックスアイテム 1
フレックスアイテム 2
フレックスアイテム 3

書字方向​

各値の説明に左から右といった説明を加えましたが、実際には書字方向によって異なります。 日本語や英語では文字は左から右へ書きますが、アラビア語やヘブライ語では右から左へ書きます。 Flexboxは書字方向に対応しており、flex-directionの値は書字方向によって変わります。

rowという値は実際にはインライン方向（文字を書く方向）に沿った軸となります。 以下はすべてrowの値を使用していますが、書字方向によって主軸の方向が異なります。

日本語​

フレックスアイテム 1
フレックスアイテム 2
フレックスアイテム 3

アラビア語​

عنصر فليكس 1
عنصر فليكس 2
عنصر فليكس 3

日本語縦書き​

CSSは縦書きにも対応していますので、この場合はrowが上から下方向に沿う軸になります。

アイテム壱
アイテム弐
アイテム参

試してみよう​

フレックスアイテム 1
フレックスアイテム 2
フレックスアイテム 3