Flexbox（Flexible Box Layout Module）はCSS3の新しいレイアウトモジュールで、複雑なレイアウトを今までより少ないコードでフレキシブルなボックスを組むことが出来ます。以前からあった技術ですが、各ブラウザーによって書き方が違ったり、仕様が変わったりと、イマイチ使いづらさがありましたが、最近のモダンブラウザーでは利用に難がなくなり充分使えるようになりました。IEのサポートポリシーの変更により、今後普及してくる技術の1つです。これを使う事でfloatを使って作っていたレイアウトが感覚的に作れるようになります。
視覚で見るのが非常に解りやすいです。
www.youtube.com
メリット
- 少ない記述で簡単に横並びにできる！
- 横並びになった要素の高さが最初から揃ってる！
- 要素を上下左右、好きな順序に並び替えられる！
- 高さの異なる横並びの要素を、簡単に上下中央揃え！
デメリット
無し！（強いて言えば一部のブラウザーにバグがあり）
各ブラウザーのFlexboxのサポート状況
最新のサポート状況をhttp://caniuse.com/#search=flexboxなどで必ずチェックしましょう
※2016年11月
Flexboxの基本
flexboxレイアウトを使うには親要素のdisplayプロパティに「flex」を指定するだけです。今回は「ul」要素を使います。
ul { display: flex; }
flex-direction
「flex-direction」プロパティを設定することにより、flexアイテムがflexコンテナでどのように配置されるか明示します。方向は2種類で、横列の水平、縦列の垂直に配置できます。
flex-direction: row; で左から右
row-reverse; で右から左
column; で上から下
column-reverse; で下から上
ul { width:600px; margin: 20px; display: flex; flex-direction: row; }
flex-wrap
「flex-wrap」プロパティは、flexコンテナが複数のアイテムを一行、または複数行に配置することをコントロールします。
flex-wrap: nowrap;（初期値）は各アイテムの幅が親要素の幅に収まるように縮小される。
flex-wrap: wrap; 各アイテムの幅が親要素の幅に収まらない場合、下に回り込みます。
justify-content
「justify-content」プロパティは、flexアイテムを一行に配置します。（text-alignの指定と類似）
justify-content: flex-start;（初期値）flexコンテナの左側に配置されます。
justify-content: flex-end; flexコンテナの右側に配置されます。
justify-content: center; 中央に配置されます。
justify-content: space-between; 最初と最後のアイテムは端に、残りは等間隔で配置されます。
justify-content: space-around; 全てのアイテムが等間隔に配置されます。
子要素に指定
order
「order」プロパティは、display: flexを指定している親要素に配置される子の順番をコントロールします。
order: 1;
order: 2;
order: 3;
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html
今までfloatやpositionを多用しなければ出来なかった様なレイアウトが少ないコードで簡単に組めるので、ぜひ色々なレイアウトを実際に組んでみましょう。
実際に「order」プロパティを使って3カラムレイアウトを組んでみましょう。
<body> <nav> <ul class="main-nav"> <li><a href="#" class="logo">Logo</a></li> <li><a href="#">Menu 1</a></li> <li><a href="#">Menu 2</a></li> <li><a href="#">Menu 3</a></li> </ul> </nav> <div class="main"> <section class="col-1"> <h1>Column 1</h1> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent fermentum id mauris eget commodo. Sed ex leo, porttitor sit amet lectus et, pretium eleifend ipsum.</p> </section> <section class="col-2"> <h1>Column 2</h1> <p>Morbi non semper sapien. Suspendisse elementum interdum metus, in volutpat lectus consectetur id. Praesent vulputate ipsum eget lectus tempus tempus. Nullam ut lobortis risus, eu tempor tellus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. </p> <p>Integer vel pellentesque elit. Sed faucibus magna vitae metus ornare, ut pulvinar leo blandit. Mauris tincidunt ante nec quam maximus iaculis ut id lorem. Integer nec ligula faucibus, sollicitudin elit at, maximus tortor.</p> </section> <section class="col-3"> <h1>Column 3</h1> <p>Integer commodo, risus vel viverra bibendum, massa massa consectetur felis.</p> </section> </div> </body>
@charset "utf-8"; /* CSS Document */ /* reset */ html, body, div, h1, h2, h3, h4, h5, h6,p, blockquote, pre, address,ul, ol, li, dl, dt, dd,table, th, td, form, fieldset { margin: 0; padding: 0; line-height: 1.0; font-family: "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; } table { border-collapse: collapse; border-spacing: 0; } ul, ol { list-style: none; /* マーカーを消す */ } a { text-decoration: none; /* 下線を消す */ } img { border: 0; } img, input { vertical-align: bottom; } /*Flexboxスタイル*/ .main-nav, .main { display: flex; } .main-nav li:first-child { margin-right: auto; } .main-nav a { margin: 10px; border-radius: 5px; background: #60B99A; color: #fff; display: block; padding: 15px; } .main-nav .logo { background: #4584b1; } /* Main contents */ .main section { flex: 1; margin: 10px; border-radius: 5px; background: #F5F0CF; padding: 15px; } .main .col-2 { flex: 2; } .main h1 { color: #E6AC27; } .main p { margin-top: 10px; font-size: 18px; } /* Mobile */ @media screen and (max-width: 767px) { .main { flex-direction: column; } }
