フレキシブルボックスレイアウト flexboxとは？

flexboxはCSS3で登場した、複雑なレイアウトをシンプルに記述することが出来るレイアウト方法の一つです。レスポンシブデザインなどとの相性もよく、ChromeやSafari、Firefox、Edgeなどの多くのブラウザで利用することができます。

flexboxを利用するメリット

今まで頻繁に利用していたfloatやinline-flex、inline-tableなどはプロパティがたくさん必要です。
おまけにIEや、デバイスの関係上、メディアクエリの記述も増え、工数はかさむばかり。

そこで、一発でレイアウトしてくれる優れもの登場ということになります。

flexboxでは、従来では難しい上下中央揃えのレイアウトやアイテムの順序の並び替え、要素の折り返し指定などをCSSのプロパティだけで実現できるようになりました。

flexbox利用のデメリット

一方、flexboxは最近のモダンブラウザでは対応していますが、IE8やIE9などの古いブラウザには対応していません。その環境でflexboxを利用するには「flexibility.js」などのスクリプトを利用する必要があります。

GitHub - jonathantneal/flexibility: A JavaScript polyfill for Flexbox

ブラウザによっては、既知のバグが存在しているため、こちらの確認も必要です。

flexbugs

flexboxの使い方

flexcontainerとflexitemの相関

display : flex → flexcontainerをブロックレベル要素として扱います

display : inline-flex → flexcontainerをインライン要素として扱います

flexboxでメニューを作成する

今回は、flexboxを使った、メニューを作成します。

子要素がはみ出した場合は親要素に自動的に収まります。

全体の幅を700px、メニューひとつの幅を200pxとするとき、親要素が700pxなのに対し、子要素が200pxです。

3つ以上メニューを並べると、従来のfloatレイアウトの場合は折り返しが発生します。

CSSフレキシブルボックスレイアウトを適用した場合は、自動的に1行に収めるという性質がありますので、多種多様なモバイル端末が出回る中、この性質はとても重要です。

floatの場合

ul.float {
 width:700px;
 background-color: #CCC;
}

ul.float li {
 display:inline-flex;
 width:200px;
 float:left;
}

flexboxの場合

ul.flex {
 width:700px;
 display:flex;
 background-color: #CCC;
}

単にul.floatに対しdisplay:flex;を記述するだけで、liなどの子要素にCSSを指定する必要はありません。

横幅を自動調整する場合もflex-wrapプロパティを利用すれば可能となります。

flex-wrapとは、親要素をはみ出した場合どうするのか？を決めるプロパティです。
例えば、親要素のwidthが700pxで子要素の130pxが5個あった場合は、650pxですので、充分入ります。

子要素が200pxの場合はどうでしょうか？
2000px×5個で1000pxとなり往来のfloatレイアウトですと、折り返してしまいます。

CSSフレキシブルボックスレイアウトでは、はみ出した分を1行に自動的に収めるか、下の段に落とすのかといった指定をするのが、flex-wrapプロパティです。

flex-wrapプロパティの値

• nowrap・・・1行に収める（初期値）
• wrap・・・下の段に落とす
• wrap-reverse・・・wrapから順番を逆にする

floatの場合

flexboxの場合

ul.flex {
 padding: 0;
 width: 700px;
 background-color: #CCC;
 display: flex; 
 flex-wrap: nowrap; 　/*追加*/
}

子要素に対し、高さを自動調節させ、中央ぞろえさせる場合は、

ul.flex li {
 width: 200px;
 display: flex; /*追加*/
 align-items: center; /*追加*/
}

アイテムを逆の順番で表示させる場合

A→B→Cとボックスが続く状態をあえてC→B→Aを見せたいレイアウトがありますが、BootStrapなどのフレームワークではアクセシビリティへの対応がありません。

読み上げの順序やナビゲーションがソースコード順に従ってしまい意図したとおりにならない、などの問題がある場合はflex-directionプロパティで「縦方向」か「横方向」かの指示を与えつつ、row-reverseと、column-reverseで始点と終点を入れ替えることができます。

これにより、視覚表現を維持しつつ、アクセシビリティに配慮したレイアウトの実装が可能になります。

※ベンダープレフィックスが必要なプロパティもありますので、Caniuseなどで調べましょう！

CSS Flexible Box Layout Module

フレキシブルボックスレイアウト flexboxについてのまとめ

floatやclearfixなどを利用して横並びメニューなどを作成していた時期もありましたが、flexboxの登場でより簡単に複雑なレイアウトを作成することが出来るようになりました。

今回はメニューの実装にflexboxを利用しましたが、他にもページ全般の複雑なレイアウトに利用するなど、今後様々な部分で活用できそうです。