HTML・CSSテックラボ

Flexbox -floatを使わないでスマートにレイアウトする方法

2016年4月13日

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;
}

これだけで次のようにリストが横並びに表示されます。

.box {
	display: flex;
}

要素を均等に配置する場合は次のようにjustify-contentプロパティの設定を追加します。

.box{
	display: flex;
	justify-content: space-around;
}

結果は次のようになります。

実際にどのようなレイアウトが可能なのかは次のサイトで確認できます
左側にあるプロパティを変更すると、右側のサンプルレイアウトが変更されます。コーディング時の参考にもなりますね。

Flexbox Playground: https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/

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

Programming Language

Server Side

Blog