解 説

Flexboxを使うとfloatでの面倒なレイアウト作成から解放されます。概ねのブラウザも対応していますし、問題のIE8以下のバージョンも急速にその終焉を迎えました。Flexboxレイアウトを積極的に採用する時が来たように思います。
Flexboxレイアウトではfloatレイアウトでできなかったことやめんどうだったことが簡単にできるようになります。

Flexboxを使う時にまず知っておきたい事は、flexアイテムとflexコンテナの概念です。
flexアイテムがカラムのことで、flexコンテナがカラムを囲む親要素と考えるとわかりやすいです。

flex1

簡単なflexレイアウトの基本

例えば次のような例を考えてみます。AとBを横並びにするためにflexを使います。
2つのdivにクラス名を付けて幅200pxと高さ200pxの矩形を作っています。
flex横並び サンプル
HTMLコード

CSSコード

divでタグ付けされたAとBを横並べにするCSSの設定は、「display:flex」たったのこれだけです!
ポイントは、「display:flex」はflexコンテナつまり親要素に設定することです。これで簡単に横並びになります。

flexコンテナつまり親要素に display:flex で、子要素は横並びのカラムになる。

flex関連のdisplayプロパティの値

display:flex
ブロックレベルのflexコンテナボックス
display:inline-flex
インラインレベルのflexコンテナボックス

*古いwebkit系では「display:-webkit-box」とする対応が必要です。

横並びと縦並びの指定flex-directionプロパティ

flexレイアウトは横並びと縦並びを切り替える「flex-directionプロパティ」が用意されています。
「flex-direction:column」または「flex-direction:row」を「display:flex」を指定したflexコンテナつまり親要素に付け加えます。

PC用は「flex-direction:row」としておき、モバイル用は「flex-direction:column」とすることで横並びと縦並びを切り替える事ができます。

flex 縦並びサンプル

表示方向プロパティflex-directionの値

カラムの並びを逆転するには「flex-direction」に「row-reverse」または「column-reverse」を指定します。

flex-direction:row
左から右
flex-direction:row-reverse
右から左
flex-direction:column
上から下
flex-direction:column-reverse
下から上

flex横の逆順並びサンプル
flex縦の逆順並びサンプル

flexレイアウトを使った実例

「CSSでカラムの作成方法〜floatとdisplay:tableの活用」で解説したサンプルをflexで横並びにした例が次のものです。

flexを使用したカラムのサンプル

カラムの並べ替え

カラムをバラバラな順番にしたい場合は、それぞれのカラムに「order」プロパティで番号を指定します。
SEO上HTMLの並び順を変えたくないけれども、デザイン上の観点から並び順を変更するときなどに便利です。

カラム並び替えのサンプル タブ型ナビの例

タブ型のナビでいつも表示ページのナビボタンが左端に移動する仕組みの例です。次の2枚の画像のタブ型ナビに注目してください。
red

green

詳細はサンプルのソースを見ていただくことにして、当該ページのナビボタンがいつも左端に来る仕組みは「display:flex」としたコンテナ内のフレックスアイテムの「.selected」が付いたものに「order: -1」を指定するだけで実現できます。

次のサンプルはECサイトなどで応用できる仕組みです。「orderプロパティ」でカラムの順番を入れ替えています。
カラムの並べ替えを応用したサンプル

HTMLコード

CSSコード

横並びflexアイテムの水平方向の位置調整

flexコンテナの中に固定サイズのflexアイテムを配置すると、余分な余白ができたりします。その場合flexアイテムの配置を左寄せ、右寄せ、中央寄せに設定できます。さらに、各flexアイテムの間隔を自動で調整する設定もできます。
そのプロパティが「justify-content」プロパティです。ポイントはflexコンテナに対して「justify-content」プロパティを指定することです。

左寄せ

左寄せは特に指定をしません。
左寄せの横並びのサンプル

HTMLコード

display: flexと設定すれば左寄せで横並びに配置されます。flexアイテムにはそれぞれ200pxのサイズ指定をしています。flexコンテナの方は特に幅指定をしていないのでいっぱいに広がった状態になっています。
CSSコード

右寄せ

flexアイテムを右寄せにするには、flexコンテナにjustify-contentプロパティを使い、値にflex-endを指定します。
flex002
右寄せの横並びのサンプル
CSSコード

中央寄せ

flexアイテムを右寄せにするには、flexコンテナにjustify-contentプロパティを使い、値にcenterを指定します。

中央寄せの横並びのサンプル
CSSコード

各flexアイテムに余白を分割し、両端の余白は無し

各flexアイテムに余白を分割し、両端の余白は無しにするspace-betweenという便利な値があります。

両端なしの自動余白分割のサンプル
CSSコード

両端と各flexアイテムに余白を分割

各flexアイテムに余白を分割し、更に両端にも余白を付ける値が、space-aroundです。

両端余白付きの自動余白分割のサンプル
CSSコード

縦並びflexアイテムの垂直方向の位置調整

Flexboxを縦に並べるには「flex-direction:column」を使いました。縦並びにしたときに、「justify-content」プロパティを使うと垂直方向に位置を設定できます。

縦並び上から基準に並べる

上側を基準に縦並びをするには、「justify-content」プロパティは必要ありません。

縦並び上から基準に並べたサンプル
CSSコード

縦並び下から基準に並べる

縦並び下から基準に並べる
CSSコード

縦並び中央から基準に並べる

縦並び中央から基準に並べる
CSSコード

縦並び自動分割に並べる両端スペースなし

縦並び自動分割に並べる両端スペースなし
CSSコード

縦並び自動分割に並べる両端スペースあり

縦並び自動分割に並べる両端スペースあり
CSSコード

横並びflexアイテムの垂直方向の位置調整

flex001
今度は縦方向にスペースがある場合にどこに表示するか設定します。この場合は、「align-items」プロパティを使用します。

次のサンプルは横方向と縦方向両方にスペースがある場合の水平方向と垂直方向の位置指定したものです。

横並びflexアイテムの垂直方向上、水平方向左の位置調整

横並びflexアイテムの垂直方向上、水平方向左の位置調整のサンプル

CSSコード

横並びflexアイテムの垂直方向上、水平方向自動調整

横並びflexアイテムの垂直方向上、水平方向自動調整のサンプル
CSSコード

横並びflexアイテムの垂直方向下、水平方向自動調整

横並びflexアイテムの垂直方向下、水平方向自動調整のサンプル
CSSコード

横並びflexアイテムの垂直方向中央、水平方向自動調整

横並びflexアイテムの垂直方向中央、水平方向自動調整
CSSコード

横並びflexアイテムの垂直方向自動調整、水平方向自動調整

「align-items:stretch」を指定すると、flexアイテムに高さを指定していないと、flexアイテムの高さがflexコンテナの高さいっぱいに広がります。

次のサンプルではAとBは高さを指定していません。それ以外は高さを200pxに指定しています。ABのみflexコンテナいっぱいに広がります。

横並びflexアイテムの垂直方向自動調整、水平方向自動調整
CSSコード

flex-growとflex-shrink

flexコンテナの大きさがflexアイテムの合計の大きさより大きい場合は大きく余白が空きます。このときにflex-growをflexアイテムに設定すると自動でflexアイテムの幅が伸びてちょうど良いサイズになってくれます。
逆にflexコンテナのサイズがflesアイテムの合計サイズより小さい場合はflex-shrinkを使うことで自動でflexアイテムのサイズが縮んでくれるものです。

flex-grow

flex-growプロパティはflexアイテムの伸長係数を決めるもので、数値で指定します。
例えば、すべてのflexアイテムに「flex-grow:1」を設定するとすべてのflexアイテムが均一に拡大して余白を埋めてくれます。

flex-grow:1のサンプル
CSSコード

flex-growの値を別々に設定すると、その数値に応じてそれぞれのflexボックスの幅が調整されます。その仕組みは残った余白部分をflex-growで指定した数値の比率に分割されるようになっています。

flex-growの値を変えて設定したサンプル

CSSコード

flex-shrink

「flex-shrink:数字」でflexアイテムの幅を自動で縮小変更できます。flexコンテナにぴったり入るように自動で縮小調整されます。flex-shrinkの値を変更するとその数値に応じてそれぞれのflexボックスの幅が調整されます。その仕組みは不足した余白部分をflex-shrinkで指定した数値の比率に分割されるようになっています。

flex-shrinkのサンプル
CSSコード

flexプロパティ

flexプロパティはflex-growと flex-shrink、そしてflex-basisの短縮記法です。
値はスペースで区切って記述され、flex-grow、flex-shrink、flex-basisの順番になります。

flex-basisプロパティとはすでに指定しているflexアイテムのwidthの値をflex-basisの値に書き換えるものです。すでにwidhで幅を指定しているのに、わざわざflex-basisを使う必要はないと考えてしまいますが、Flexboxではwidhで幅を指定しても、先のflex-growやflex-shrinkを使われると指定していた幅が無効になってしまいます。
そんなときに、flex-basisを使えばある一定の条件のもとwidthの値を固定することができるわけです。

サンプル1 flex-grow、flex-shrinkの値を1にしてflex-basisに固定の値を設定
flex-grow、flex-shrinkの値を1にしてflex-basisに固定の値を設定するとフレックスコンテナがflex-basisの固定値の合計よりも拡大縮小したら、フレックスアイテムは固定幅の比率を保ち続けて拡大縮小します。
CSSコード

サンプル2 flex-growの値を0、flex-shrinkの値を1にしてflex-basisに固定の値を設定
flex-growの値を0、flex-shrinkの値を1にしてflex-basisに固定の値を設定するとフレックスコンテナがflex-basisの固定値の合計よりも拡大してもフレックスアイテムの固定幅は保ち続けます。けれども、縮小した場合はフレックスアイテムは固定の幅の比率を保ちながら縮小します。
CSSコード

サンプル3 flex-growの値を1、flex-shrinkの値を0にしてflex-basisに固定の値を設定
flex-growの値を1、flex-shrinkの値を0にしてflex-basisに固定の値を設定するとフレックスコンテナがflex-basisの固定値の合計よりも縮小してもフレックスアイテムの固定幅は保ち続けます。けれども、拡大した場合はフレックスアイテムは固定の幅の比率を保ちながら拡大します。
CSSコード

サンプル4 flex-grow、flex-shrinkの値を0にしてflex-basisに固定の値を設定
flex-grow、flex-shrinkの値を0にしてflex-basisに固定の値を設定するとフレックスコンテナがflex-basisの固定値の合計よりも拡大縮小してもフレックスアイテムは固定の幅を保ち続けます。
CSSコード