| 属性名 | flex |
|---|---|
| 値 | none | [ <flex-grow> <flex-shrink>? || <flex-basis> ] |
| 初期値 | 0 1 auto |
| 適用可能要素 | フレックスアイテム |
| 継承 | 継承しない |
| メディア | visual |
| アニメーション | 不可 |
| CSS | IE/Edge | Firefox | Chrome | Opera | Safari |
|---|---|---|---|---|---|
| CSS3 | 11 | 20 | 21(-webkit) 29 | 15(-webkit) 17 | 6.1(-webkit) 9 |
flex-grow, flex-shrink, flex-basis をまとめて指定します。
コンテンツを横に並べるには、初期の時代はテーブルが使用されていました。CSS1～CSS2 の時代には、float:left と clearfix を用いた手法が用いられていましたが、今後は CSS3 で策定中のフレキシブルボックス(フレックスボックス)が主流になると思われます。ただ、CSS3 での仕様が数回変更されていることや、IE でのサポートが遅れたことから、一般的に使用されるには、もう少しだけ時間がかかりそうです。
フレキシブルボックスを用いて、コンテンツを横方向に並べることができます。並べる要素をフレックスアイテム、それを包含する要素をフレックスコンテナと呼びます。display に flex を指定することでフレックスコンテナを作成します。フレックスコンテナの子要素はフレックスアイテムとして扱われます。
| フレックスコンテナ | ||
| フレックスアイテムA | フレックスアイテムB | フレックスアイテムC |
フレキシブルボックスを用いることで、ページを下記の様なペインに分割することが可能となります。
フレキシブルボックスを作成するには、まず、フレックスコンテナに display:flex または inline-flex を指定します。仕様策定中に名前が変更されたり、ベンダプレフィックスが必要だったりするため、多くのブラウザに対応するには下記の様に指定します。
.flexbox {
display: -webkit-box; /* Chrome 4-20, Firefox 2-21, Safari 3.1-6.0 */
display: -webkit-flex; /* Chrome 21-27 */
display: -moz-box; /* Firefox 2-21 */
display: -ms-flexbox; /* IE9 */
display: flex;
}
.inline-flexbox {
display: -webkit-inline-box; /* Chrome 4-20, Safari 3.1-6.0 */
display: -webkit-inline-flex; /* Chrome 21-27 */
display: -moz-inline-box; /* Firefox 2-21 */
display: -ms-inline-flexbox; /* IE9 */
display: inline-flex;
}
フレキシブルボックス関連の CSS 属性には下記があります。
.flexbox {
display: flex;
display: -ms-flexbox;
padding: 10px;
border: 1px solid #999;
background-color: #ddd;
}
.boxA, .boxB, .boxC {
border: 1px solid #999;
text-align: center;
}
.boxA { flex: 1; background-color: #fcc; }
.boxB { flex: 2; background-color: #cfc; }
.boxC { flex: 3; background-color: #ccf; }
<div class="flexbox"> <div class="boxA">A</div> <div class="boxB">B</div> <div class="boxC">C</div> </div>