Flexboxの概要
Flexbox(CSS Flexible Box Layout Module)はレイアウト用に用意されたプロパティで、CSS3から導入されました。レスポンシブのように要素のサイズが固定ではない場合でも、シンプルな記述で柔軟なレイアウトを可能にします。
floatプロパティでは難しかったレイアウトも簡単に実現することができ、次世代のレイアウト方法の標準として期待されています。
簡単な使用例
Flexboxの詳細や使い方の前に、簡単な使用例を紹介します。
<ul class="box"> <li>1</li> <li>2</li> <li>3</li> </ul>
flexboxを使うには、親要素のdisplay
プロパティの値にflex
を指定します。
.box { display: flex; }
これだけで次のようにリストが横並びに表示されます。
- 1
- 2
- 3
.box { display: flex; }
要素を均等に配置する場合は次のようにjustify-content
プロパティの設定を追加します。
.box{ display: flex; justify-content: space-around; }
結果は次のようになります。
- 1
- 2
- 3
実際にどのようなレイアウトが可能なのかは次のサイトで確認できます
左側にあるプロパティを変更すると、右側のサンプルレイアウトが変更されます。コーディング時の参考にもなりますね。
Flexboxの利点
flexboxは次のようなことが可能です。
- 要素のサイズが固定ではないレイアウトでも簡単に実装できる
- シンプルな記述で様々なレイアウトを実装できる
- 高さの違う要素が横並びになった場合、自動で高さが揃えられる
- 要素の左右、要素間の余白をコントロールできる
対応ブラウザ
Flexboxをサポートしているブラウザの状況は下記に詳しいですが、モダンブラウザはほぼすべて対応しています。
IEは11から部分的な対応となりますが、実用上ほとんど問題ありません。
- Can I use... Support tables for HTML5, CSS3, etc
- http://caniuse.com/#search=flex
用語
Flexboxを構成する要素はFlexコンテナとFlexアイテムの2種類があります。FlexコンテナはFlexアイテムを内包する親要素で、Flexコンテナに内包される要素はすべてFlexアイテムとなります。
Flexコンテナ、Flexアイテムとして定義されると、Flexboxに用意された様々なプロパティが利用できるようになります。
- Flexコンテナ
- FlexコンテナはFlexアイテムを内包する親要素です。
display
プロパティの値にflex
、またはinline-flex
を指定してFlexコンテナを定義します。 - Flexアイテム
- FlexコンテナFlexコンテナの子要素は自動的にFlexアイテムとなります。Flexアイテムに該当する要素は、様々なFlexboxアイテム用のプロパティが使えるようになります。
Flexboxの使い方
Flexコンテナを定義する
Flexboxを実装するには、まずは親要素をFlexコンテナにする必要があります。
簡単な使用例でも紹介したように、Flexコンテナの指定はdisplayプロパティの値にflex
を指定するだけです。
.box { display: flex; }
現時点(2016年)ではベンダプレフィックスが必要なため、下記のような指定になります。
.box { display: flex; display: -webkit-flex; }
ブロック要素の場合は上記の通りですが、Flexコンテナをインライン要素として扱いたい場合はinline-flex
を指定します。
.box { display: inline-flex; display: -webkit-inline-flex; }
display
プロパティの値にflex
、inline-flex
を指定することで、その子要素は自動的にFlexアイテムになります。
Flexbox関連のプロパティを設定
Flexbox関連のプロパティは、Flexコンテナ用とFlexアイテム用の2種類があります。
シンプルなレイアウトであればFlexコンテナのプロパティで事足りますが、特定の子要素に対して特別な処理をしたい場合などはFlexアイテムを使います。
下記にてFlexコンテナとFlexアイテムに用意されたプロパティを簡単に紹介します。
Flexコンテナ
- flex-direction
- Flexアイテムの向きと方向を設定します。
- flex-wrap
- Flexアイテムの折り返しを設定します。
- flex-flow
flex-direction
とflex-wrap
をまとめて設定するショートハンドです。- justify-content
- Flexアイテム同士の余白を調整します。
- align-items
- Flexアイテムを垂直方向で揃えます。
- align-content
- Flexアイテムが複数行になったときの揃え方を設定します。
Flexアイテム
- flex-grow
- Flexアイテムの伸びる倍率を設定します。
- flex-shrink
- Flexアイテムの縮む倍率を設定します。
- flex-basis
- Flexアイテムの最小の長さを設定します。
- align-self
align-items
と同じですが、個々のFlexアイテムに対して設定します。- order
- Flexアイテムの個々の順番を設定します。
- flex
flex-growflex-shrinkflex-basis
のショートハンドです。
各プロパティの詳細はFlexboxのプロパティ紹介に記載しています。
Flexコンテナとして定義すると、その要素はFlexbox関連のプロパティが使えるようになりますが、代わりにブロックレイアウトを前提としたプロパティ、擬似要素が使えなくなります。
以下のプロパティと擬似要素は使えません。
- column-*プロパティ
- floatプロパティ
- clearプロパティ
- vertical-alignプロパティ
- 疑似要素::first-line、::first-letter