最新のドラフトに準じた CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説
Flexboxとは、要素のサイズが不明なものでもダイナミックに変化するものでも柔軟なレイアウトを実現できるCSS3の新しいレイアウトモジュールです。複雑なレイアウトでも今までより少ないコードで、よりシンプルなプロセスで実装することができます。
Flexboxで使用する各プロパティがどのように機能するのか、レイアウトにどのように影響を与えるか視覚的に解説した「CSS3 Flexbox ヴィジュアルガイド」を紹介します。
A Visual Guide to CSS3 Flexbox Properties
下記は各ポイントを意訳したものです。
※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。
- flexboxとは
- flexboxの使い方
- flexboxコンテナ: flex-direction
- flexboxコンテナ: flex-wrap
- flexboxコンテナ: flex-flow
- flexboxコンテナ: justify-content
- flexboxコンテナ: align-items
- flexboxコンテナ: align-content
- メモ: flexコンテナ
- flexboxアイテム: order
- flexboxアイテム: flex-grow
- flexboxアイテム: flex-shrink
- flexboxアイテム: flex-basis
- flexboxアイテム: flex
- flexboxアイテム: align-self
- メモ: flexアイテム
- flexboxのレイアウトを試せるツール
flexboxとは
flexboxの各プロパティを見る前に、flexboxとはどんなものか説明します。flexboxを使ったレイアウトとは、flexアイテムと呼ばれる複数の子要素を内包するflexコンテナの親要素で構成されています。
上の図は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-)
詳しいサポート状況は、下記ページをご覧ください。
flexboxの使い方
flexboxレイアウトを使うには、HTMLの親要素のdisplayプロパティに「flex」を指定するだけです。
.flex-container { display: -webkit-flex; /* Safari */ display: flex; }
もしくは、インライン要素に使うのであれば「inline-flex」を指定します。
.flex-container { display: -webkit-inline-flex; /* Safari */ display: inline-flex; }
メモ
これは親要素に加える必要がある唯一のプロパティです。その子要素は自動的にflexアイテムになります。
flexboxのプロパティを分類する方法はいくつかあります。ここでは最も簡単な方法として、一つはflexboxコンテナ、一つはflexboxアイテム、と二つのグループに分けてその使い方を説明します。
flexboxコンテナ: flex-direction
「flex-direction」プロパティは、flexコンテナの主軸の方向を設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。
.flex-container { -webkit-flex-direction: row; /* Safari */ flex-direction: row; }
flexアイテムは左から右へ(ltr)水平方向に配置されます。
.flex-container { -webkit-flex-direction: row-reverse; /* Safari */ flex-direction: row-reverse; }
flexアイテムは右から左へ(rtl)水平方向に配置されます。
.flex-container { -webkit-flex-direction: column; /* Safari */ flex-direction: column; }
flexアイテムは上から下へ垂直方向に配置されます。
.flex-container { -webkit-flex-direction: column-reverse; /* Safari */ flex-direction: column-reverse; }
flexアイテムは下から上へ垂直方向に配置されます。
「flex-direction」のデフォルト値: row
「row」と「row-reverse」はライティングモードに依存するので、rtlの環境だとそれぞれ逆に配置されます。
flexboxコンテナ: flex-wrap
flexboxの初期のコンセプトは、1行に複数のアイテムをコンテナにセットすることです。そこから進化し、「flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。
.flex-container { -webkit-flex-wrap: nowrap; /* Safari */ flex-wrap: nowrap; }
flexアイテムは横一行に配置されます。各アイテムの幅はflexコンテナの幅に収まるように縮小されます。
.flex-container { -webkit-flex-wrap: wrap; /* Safari */ flex-wrap: wrap; }
flexアイテムは横複数行に配置されます。必要があれば、左から右へ、上から下へ、の順番に配置されます。
.flex-container { -webkit-flex-wrap: wrap-reverse; /* Safari */ flex-wrap: wrap-reverse; }
flexアイテムは横複数行に配置されます。必要があれば、左から右へ、下から上へ、の順番に配置されます。
「flex-wrap」のデフォルト値: nowrap
これらのプロパティはライティングモードに依存するので、rtlの環境だとそれぞれ逆に配置されます。
flexboxコンテナ: flex-flow
「flex-flow」プロパティは、「flex-direction」と「flex-wrap」を設定するショートハンドです。
.flex-container { -webkit-flex-flow: <flex-direction> || <flex-wrap>; /* Safari */ flex-flow: <flex-direction> || <flex-wrap>; }
「flex-flow」のデフォルト値: row nowrap
flexboxコンテナ: justify-content
「justify-content」プロパティは、flexコンテナの主軸に沿ってflexアイテムを一行に配置します。
.flex-container { -webkit-justify-content: flex-start; /* Safari */ justify-content: flex-start; }
flexアイテムはモードに従い、flexコンテナの左側に配置されます。
.flex-container { -webkit-justify-content: flex-end; /* Safari */ justify-content: flex-end; }
flexアイテムはモードに従い、flexコンテナの右側に配置されます。
.flex-container { -webkit-justify-content: center; /* Safari */ justify-content: center; }
flexアイテムはflexコンテナの中央に配置されます。
.flex-container { -webkit-justify-content: space-between; /* Safari */ justify-content: space-between; }
flexアイテムは最初と最後のアイテムは端に、残りは等間隔で配置されます。
.flex-container { -webkit-justify-content: space-around; /* Safari */ justify-content: space-around; }
flexアイテムは全てのアイテムは等間隔に配置されます。
「justify-content」のデフォルト値: flex-start
flexboxコンテナ: align-items
flexアイテムはflexコンテナのクロス軸に垂直方向で配置することができます。「align-items」プロパティは、デフォルトで全てのflexアイテムを含めます。
.flex-container { -webkit-align-items: stretch; /* Safari */ align-items: stretch; }
flexアイテムはflexコンテナの高さ(または幅)いっぱいに配置されます。
.flex-container { -webkit-align-items: flex-start; /* Safari */ align-items: flex-start; }
flexアイテムはflexコンテナのクロス軸の始点に配置されます。
.flex-container { -webkit-align-items: flex-end; /* Safari */ align-items: flex-end; }
flexアイテムはflexコンテナのクロス軸の終点に配置されます。
.flex-container { -webkit-align-items: center; /* Safari */ align-items: center; }
flexアイテムはflexコンテナのクロス軸の中央に配置されます。
.flex-container { -webkit-align-items: baseline; /* Safari */ align-items: baseline; }
flexアイテムはベースラインに沿って配置されます。
「align-items」のデフォルト値: stretch
ベースラインがどのように計算されるかは、W3Cのflex-baselinesを参考にしてください。
flexboxコンテナ: align-content
「align-content」プロパティは「justify-conten」と似ていますが、「align-content」プロパティはクロス軸の垂直方向に揃えて配置します。
.flex-container { -webkit-align-content: stretch; /* Safari */ align-content: stretch; }
flexアイテムは均等に分配されたスペースが全てのflexアイテムのあとについて配置されます。
.flex-container { -webkit-align-content: flex-start; /* Safari */ align-content: flex-start; }
flexアイテムはflexコンテナのクロス軸の始点に向かって積み重なります。
.flex-container { -webkit-align-content: flex-end; /* Safari */ align-content: flex-end; }
flexアイテムはflexコンテナのクロス軸の終点に向かって積み重なります。
.flex-container { -webkit-align-content: center; /* Safari */ align-content: center; }
flexアイテムの行はflexコンテナのクロス軸の中心に積み重なります。
.flex-container { -webkit-align-content: space-between; /* Safari */ align-content: space-between; }
flexアイテムの行はflexコンテナの始点から終点に等間隔で表示されます。
.flex-container { -webkit-align-content: space-around; /* Safari */ align-content: space-around; }
flexアイテムはflexアイテムの全ての行の周りに等間隔で表示されます。
「align-content」のデフォルト値: stretch
このプロパティはflexコンテナが複数行のflexアイテムをもっている時だけ効果があります。もしflexアイテムが一行だった場合は、レイアウトに影響を与えません。
メモ: flexコンテナ
- 全ての「column-*」プロパティはflexコンテナに影響を与えません。
- 「::first-line」「::first-letter」などの疑似要素はflexコンテナに適用されません。
flexboxアイテム: order
「order」プロパティは、flexコンテナ内に配置されるflexコンテナの子の順番をコントロールします。
.flex-item { -webkit-order: <integer>; /* Safari */ order: <integer>; }
flexアイテムはHTMLの並び順を変えずに、このシンプルなプロパティで変更できます。
「order」のデフォルト値: 0
flexboxアイテム: flex-grow
「flex-grow」プロパティは、フリーのポジティブなスペースがある場合にflexアイテムが他のflexアイテムと比較してどのくらいの大きさになるかを指定します。
.flex-item { -webkit-flex-grow: <number>; /* Safari */ flex-grow: <number>; }
「flex-grow」の値を同じに指定すると、全てのflexアイテムは同じサイズになります。
2番目のflexアイテムだけ値を変えると、他のアイテムに比べて多くのスペースを取ります。
「flex-grow」のデフォルト値: 0
マイナスの値は無効です。
flexboxアイテム: flex-shrink
「flex-shrink」プロパティは、フリーのネガティブなスペースにflexコンテナ内のflexアイテムが残りのアイテムと比較してどのくらい縮まるかを指定します。
.flex-item { -webkit-flex-shrink: <number>; /* Safari */ flex-shrink: <number>; }
デフォルトで全てのflexアイテムは縮小することができます。しかし「0」に指定した場合は、オリジナルのサイズを維持します。
「flex-shrink」のデフォルト値: 0
マイナスの値は無効です。
flexboxアイテム: flex-basis
「flex-basis」プロパティは、flexアイテムの最初のメインとなるサイズを元に、幅と高さのプロパティを同じ値にします。
.flex-item { -webkit-flex-basis: auto | <width>; /* Safari */ flex-basis: auto | <width>; }
4番目のflexアイテムの「flex-basis」を「350px」に指定し、残りは最初の大きさに従います。
「flex-basis」のデフォルト値: auto
autoの値はネーミングの問題がありますが、将来解決される予定です。
flexboxアイテム: flex
「flex」プロパティは、「flex-grow」「flex-shrink」「flex-basis」のショートハンドです。「auto (1 1 auto) 」「(0 0 auto)」といった指定ができます。
.flex-item { -webkit-flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; /* Safari */ flex: none | auto | [ <flex-grow> <flex-shrink>? || <flex-basis> ]; }
「flex」のデフォルト値: 0 1 auto
W3Cはこのflexを使ったショートハンドの記述を別個で使うより奨励しています。参考:flex-common
flexboxアイテム: align-self
「align-self」プロパティは、flexアイテムの整列を前述の「align-items」での指定より優先します。
.flex-item { -webkit-align-self: auto | flex-start | flex-end | center | baseline | stretch; /* Safari */ align-self: auto | flex-start | flex-end | center | baseline | stretch; }
3番目と4番目のflexアイテムは「align-self」プロパティを使い配置しています。
「align-self」のデフォルト値: auto
「align-self」の「auto」の値は、その要素の親の「align-items」の値を元に計算します。
メモ: flexアイテム
- 「float」や「clear」や「vertical-align」はflexアイテムに影響を与えません。
flexboxのレイアウトを試せるツール
flexboxのレイアウトの威力を調査できる面白いツールを作りました。複雑なレイアウトも作成できるので、さまざまなプロパティを試してみてください。
sponsors
Post on:2015年4月23日