HTML・CSSテックラボ

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

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 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プロパティの値にflexinline-flexを指定することで、その子要素は自動的にFlexアイテムになります。

Flexbox関連のプロパティを設定

Flexbox関連のプロパティは、Flexコンテナ用とFlexアイテム用の2種類があります。
シンプルなレイアウトであればFlexコンテナのプロパティで事足りますが、特定の子要素に対して特別な処理をしたい場合などはFlexアイテムを使います。

下記にてFlexコンテナとFlexアイテムに用意されたプロパティを簡単に紹介します。

Flexコンテナ
flex-direction
Flexアイテムの向きと方向を設定します。
flex-wrap
Flexアイテムの折り返しを設定します。
flex-flow
flex-directionflex-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

関連記事