CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説

Flexboxとは、要素のサイズが不明なものでもダイナミックに変化するものでも柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。

Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガイド」を紹介します。

サイトのキャプチャ

A Visual Guide to CSS3 Flexbox Properties

下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。

flexboxとは

flexboxの各プロパティを見る前に、flexboxとはどんなものか説明します。flexboxを使ったレイアウトとは、flexアイテムと呼ばれる複数の子要素を内包するflexコンテナの親要素で構成されています。

flexboxを使ったレイアウトの概要図

上の図はflexレイアウトの概要と各プロパティで、さらに多くの情報はW3Cのflexbox modelを参考にしてください。

flexboxは2009年の最初のドラフトから何度も変化しましたが、ここでは機能している最新のドラフト(CSS Flexible Box Layout Module Level 1: 2014年9月)をベースにします。

flexboxのブラウザのサポート状況

  • Chrome 29+
  • Firefox 28+
  • Internet Explorer 11+
  • Opera 17+
  • Safari 6.1+ (プレフィックス: -webkit-)
  • Android 4.4+
  • iOS 7.1+ (プレフィックス: -webkit-)

詳しいサポート状況は、下記ページをご覧ください。

サイトのキャプチャ

flexのサポート状況 -Can I Use

flexboxの使い方

flexboxレイアウトを使うには、HTMLの親要素のdisplayプロパティに「flex」を指定するだけです。

もしくは、インライン要素に使うのであれば「inline-flex」を指定します。

メモ

これは親要素に加える必要がある唯一のプロパティです。その子要素は自動的にflexアイテムになります。

flexboxのプロパティを分類する方法はいくつかあります。ここでは最も簡単な方法として、一つはflexboxコンテナ、一つはflexboxアイテム、と二つのグループに分けてその使い方を説明します。

flexboxコンテナ: flex-direction

「flex-direction」プロパティは、flexコンテナの主軸の方向を設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。

flexアイテムは左から右へ(ltr)水平方向に配置されます。

flex-direction: row; の実装サンプル

flexアイテムは右から左へ(rtl)水平方向に配置されます。

flex-direction: row-reverse; の実装サンプル

flexアイテムは上から下へ垂直方向に配置されます。

flex-direction: column; の実装サンプル

flexアイテムは下から上へ垂直方向に配置されます。

flex-direction: column-reverse; の実装サンプル

「flex-direction」のデフォルト値: row

「row」と「row-reverse」はライティングモードに依存するので、rtlの環境だとそれぞれ逆に配置されます。

flexboxコンテナ: flex-wrap

flexboxの初期のコンセプトは、1行に複数のアイテムをコンテナにセットすることです。そこから進化し、「flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。

flexアイテムは横一行に配置されます。各アイテムの幅はflexコンテナの幅に収まるように縮小されます。

flex-wrap: nowrap; の実装サンプル

flexアイテムは横複数行に配置されます。必要があれば、左から右へ、上から下へ、の順番に配置されます。

flex-wrap: wrap; の実装サンプル

flexアイテムは横複数行に配置されます。必要があれば、左から右へ、下から上へ、の順番に配置されます。

flex-wrap: wrap-reverse; の実装サンプル

「flex-wrap」のデフォルト値: nowrap

これらのプロパティはライティングモードに依存するので、rtlの環境だとそれぞれ逆に配置されます。

flexboxコンテナ: flex-flow

「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。

「flex-flow」のデフォルト値: row nowrap

flexboxコンテナ: justify-content

「justify-content」プロパティは、flexコンテナの主軸に沿ってflexアイテムを一行に配置します。

flexアイテムはモードに従い、flexコンテナの左側に配置されます。

justify-content: flex-start; の実装サンプル

flexアイテムはモードに従い、flexコンテナの右側に配置されます。

justify-content: flex-end; の実装サンプル

flexアイテムはflexコンテナの中央に配置されます。

justify-content: center; の実装サンプル

flexアイテムは最初と最後のアイテムは端に、残りは等間隔で配置されます。

justify-content: space-between; の実装サンプル

flexアイテムは全てのアイテムは等間隔に配置されます。

justify-content: space-around; の実装サンプル

「justify-content」のデフォルト値: flex-start

flexboxコンテナ: align-items

flexアイテムはflexコンテナのクロス軸に垂直方向で配置することができます。「align-items」プロパティは、デフォルトで全てのflexアイテムを含めます。

flexアイテムはflexコンテナの高さ(または幅)いっぱいに配置されます。

align-items: stretch; の実装サンプル

flexアイテムはflexコンテナのクロス軸の始点に配置されます。

align-items: flex-start; の実装サンプル

flexアイテムはflexコンテナのクロス軸の終点に配置されます。

align-items: flex-end; の実装サンプル

flexアイテムはflexコンテナのクロス軸の中央に配置されます。

align-items: center; の実装サンプル

flexアイテムはベースラインに沿って配置されます。

align-items: beseline; の実装サンプル

「align-items」のデフォルト値: stretch

ベースラインがどのように計算されるかは、W3Cのflex-baselinesを参考にしてください。

flexboxコンテナ: align-content

「align-content」プロパティは「justify-content」と似ていますが、「align-content」プロパティはクロス軸の垂直方向に揃えて配置します。

flexアイテムは均等に分配されたスペースが全てのflexアイテムのあとについて配置されます。

align-content: stretch; の実装サンプル

flexアイテムはflexコンテナのクロス軸の始点に向かって積み重なります。

align-content: flex-start; の実装サンプル

flexアイテムはflexコンテナのクロス軸の終点に向かって積み重なります。

align-content: flex-end; の実装サンプル

flexアイテムの行はflexコンテナのクロス軸の中心に積み重なります。

align-content: center; の実装サンプル

flexアイテムの行はflexコンテナの始点から終点に等間隔で表示されます。

align-content: space-between; の実装サンプル

flexアイテムはflexアイテムの全ての行の周りに等間隔で表示されます。

align-content: space-around; の実装サンプル

「align-content」のデフォルト値: stretch

このプロパティはflexコンテナが複数行のflexアイテムをもっている時だけ効果があります。もしflexアイテムが一行だった場合は、レイアウトに影響を与えません。

メモ: flexコンテナ

  • 全ての「column-*」プロパティはflexコンテナに影響を与えません。
  • 「::first-line」「::first-letter」などの疑似要素はflexコンテナに適用されません。

flexboxアイテム: order

「order」プロパティは、flexコンテナ内に配置されるflexコンテナの子の順番をコントロールします。

flexアイテムはHTMLの並び順を変えずに、このシンプルなプロパティで変更できます。

orderプロパティの実装サンプル

「order」のデフォルト値: 0

flexboxアイテム: flex-grow

「flex-grow」プロパティは、フリーのポジティブなスペースがある場合にflexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定します。

「flex-grow」の値を同じに指定すると、全てのflexアイテムは同じサイズになります。

flex-grow: 1; の実装サンプル

2番目のflexアイテムだけ値を変えると、他のアイテムに比べて多くのスペースを取ります。

flex-grow: 3; の実装サンプル

「flex-grow」のデフォルト値: 0

マイナスの値は無効です。

flexboxアイテム: flex-shrink

「flex-shrink」プロパティは、フリーのネガティブなスペースにflexコンテナ内のflexアイテムが残りのアイテムと比較してどのくらい縮まるかを指定します。

デフォルトで全てのflexアイテムは縮小することができます。しかし「0」に指定した場合は、オリジナルのサイズを維持します。

flex-shrink: 0; の実装サンプル

「flex-shrink」のデフォルト値: 0

マイナスの値は無効です。

flexboxアイテム: flex-basis

「flex-basis」プロパティは、flexアイテムの最初のメインとなるサイズを元に、幅と高さのプロパティを同じ値にします。

4番目のflexアイテムの「flex-basis」を「350px」に指定し、残りは最初の大きさに従います。

flex-basis: 350px; の実装サンプル

「flex-basis」のデフォルト値: auto

autoの値はネーミングの問題がありますが、将来解決される予定です。

flexboxアイテム: flex

「flex」プロパティは、「flex-grow」「flex-shrink」「flex-basis」のショートハンドです。「auto (1 1 auto) 」「(0 0 auto)」といった指定ができます。

「flex」のデフォルト値: 0 1 auto

W3Cはこのflexを使ったショートハンドの記述を別個で使うより奨励しています。参考:flex-common

flexboxアイテム: align-self

「align-self」プロパティは、flexアイテムの整列を前述の「align-items」での指定より優先します。

3番目と4番目のflexアイテムは「align-self」プロパティを使い配置しています。

align-selfプロパティの実装サンプル

「align-self」のデフォルト値: auto

「align-self」の「auto」の値は、その要素の親の「align-items」の値を元に計算します。

メモ: flexアイテム

  • 「float」や「clear」や「vertical-align」はflexアイテムに影響を与えません。

flexboxのレイアウトを試せるツール

flexboxのレイアウトの威力を調査できる面白いツールを作りました。複雑なレイアウトも作成できるので、さまざまなプロパティを試してみてください。

サイトのキャプチャ

flexbox playground

top of page

©2017 coliss