Tweet

Pocket

ブロック要素を横並びにする場合、通常はfloatを使って行うかと思いますが、floatを使うより簡単に横並びに出来て、横並びにした要素の高さを揃えるなどが簡単に出来る方法があります！
それは「Flexbox」です。
「Flexbox」はいうほど新しい技術ではないのですが、対応ブラウザが少なかったり、仕様が安定していなかったりとなかなか使える機会がなかったのですが、仕様が安定してきて対応ブラウザも増えて来ましたので使う機会も出てくるかなと思いましたので、忘却録的に使用方法を記しておこうと思います。
（対応ブラウザに関して、IE8、9では未対応なのですがJQueryを使って対応させることが出来ます。その方法はまた後ほど別記事で書こうかと思います。）

1）Flexboxコンテナーを作る

まずはFlexboxを使用する為のコンテナー（親要素）が必要です。
cssでコンテナー要素に「display:flex」を指定すれば「）Flexboxコンテナー」として定義することができます。

CSS

#flexContainer {
	display:-webkit-flex;
	display:-moz-flex;
	display:-ms-flex;
	display:-o-flex;
	display:flex;
}

※safariは「display:-webkit-box;」と指定することで対応可能ですが、バージョン5以下では正常に対応されないので、safari 5以下には別途floatで対応するなどが必要です。

2）Flexboxアイテムを作る

Flexboxコンテナーの子要素がFlexboxアイテムとなります。
特にcssを指定しなくても基本的には大丈夫です。

「Flexboxコンテナー」で指定できるプロパティ

「flex-direction」：子要素の配置方向

row → 子要素がHTMLの書き順で、左から右に配置されます。（初期値）
column → 子要素がHTMLの書き順で、上から下に配置されます。
row-reverse → 子要素がHTMLの書き順で、右から左に配置されます。
column-reverse → 子要素がHTMLの書き順で、下から上に配置されます。

「flex-wrap」：子要素の折り返し設定

nowrap → 子要素が親要素からはみ出しても改行されない。
wrap → 子要素が親要素からはみ出すと改行される。
wrap-reverse → wrapと同じだが、改行位置が逆になる。

※「flex-flow」で「flex-direction」と「flex-wrap」をまとめて記述することが出来ます。

CSS

#flexContainer {
	flex-flow:row wrap;
}

justify-content：水平方向の揃え方

flex-start → 子要素が横並びの場合は「左揃え」、縦並びの場合は「上揃え」になる。
flex-end → 子要素が横並びの場合は「右揃え」、縦並びの場合は「下揃え」になる。
center → 子要素が中央揃えになる。
space-between → 子要素同士が均等に間隔を空けて並びます。
space-around → 「space-between」と同じだが、一番端の子要素の外側にも子要素の半分の余白が空きます。

align-items：垂直方向の揃え方

flex-start → 子要素が横並びの場合は「上揃え」、縦並びの場合は「左揃え」になる。
flex-end → 子要素が横並びの場合は「下揃え」、縦並びの場合は「右揃え」になる。
center → 子要素が中央揃えになる。
baseline → 子要素の内容のベースラインを揃える。
stretch → 子要素の高さが設定されている場合、その高さまで広げます。設定されていない場合、一番高さが長い子要素の高さに合わせて自動的に広げます。

align-content：行の揃え方

※「flex-wrap」で「nowrap」以外に設定した場合のみ有効。
※要素が複数行になった場合の揃え方です。

flex-start → 子要素が横並びの場合は「上揃え」、縦並びの場合は「左揃え」になる。
flex-end → 子要素が横並びの場合は「下揃え」、縦並びの場合は「右揃え」になる。
center → 子要素が中央揃えになる。
space-between → 子要素が改行された位置に均等に余白が入って配置される。
space-around → 「space-between」と同じだが、上下の外側にも子要素の半分の余白が空きます。

「Flexboxアイテム」で指定できるプロパティ

flex-grow：Flexアイテムの「伸びる」倍率

Flexコンテナーの中での伸びる幅の比率を指定します。
例）Flexアイテムが2つある場合、それぞれのflex-growを「1」に指定した場合は「50%」の幅でFlexアイテムが表示されます。

flex-shrink：Flexアイテムの「縮む」倍率

Flexコンテナーの中での縮む幅の比率を指定します。
例）Flexアイテムが2つある場合、それぞれのflex-growを「1」に指定した場合は「50%」の幅でFlexアイテムが表示されます。

flex-basis：Flexアイテムのベースとなる長さ

「width」とほぼ同じ働きをし、Flexアイテムの最小の長さとなります。省略した場合、値は「0」と指定されます。

flex：伸縮性設定全般

「flex」で「flex-grow」「flex-shrink」「flex-basis」を一度に指定出来ます。

CSS

#flexContainer div {
	flex:1 1 auto;
}

align-self：個別のFlexアイテムの垂直方向の揃え方

※「align-items」と全く同じように機能するが、こちらは「個別のFlexアイテム」に対して指定するものです。

flex-start → 子要素が横並びの場合は「上揃え」、縦並びの場合は「左揃え」になる。
flex-end → 子要素が横並びの場合は「下揃え」、縦並びの場合は「右揃え」になる。
center → 子要素が中央揃えになる。
baseline → 子要素の内容のベースラインを揃える。
stretch → 子要素の高さが設定されている場合、その高さまで広げます。設定されていない場合、一番高さが長い子要素の高さに合わせて自動的に広げます。

order：順番指定

ページで表示される順番を指定できます。
※HTMLの記述の順番を変えるものではありません。あくまでビジュアル的な順番のみです。

参考サイト

• CSS3のFlexboxを基本から理解して、使い倒そう！