display:flex
display:flexはFlexコンテナボックスを作成するためのdisplayプロパティです。
.selector{
display:flex;
}「display:flex」は仕様策定の段階で、当初は「display:box」と定義されていたが途中で「display:flexbox」に変更され、最終的に「display:flex」なった経緯があり草案段階のブラウザ実装などを考慮すると以下のようにベンダープレフィックスを付加すると幅広いブラウザサポートが可能です。
.selector{
display : -webkit-box;
display : -ms-flexbox;
display : -webkit-flex;
display : flex;
}display:flexを指定した要素の子要素は横並び(インラインボックス化)にされ高さが一番高い要素に揃えられます。
例えば次のようなHTMLとCSSを組み合わせると高さが揃えられます。
<div class="flex">
<div class="flex-item">item1<br>item1</div>
<div class="flex-item">item2<br>item2<br>item2</div>
<div class="flex-item">item3</div>
<div class="flex-item">item4</div>
<div class="flex-item">item5</div>
</div>.flex{
display : -webkit-box;
display : -ms-flexbox;
display : -webkit-flex;
display : flex;
padding:2px;
background: black;
}
.flex-item{
width:100px;
background: red;
color:white;
padding:10px;
}
.flex-item:nth-child(2n){
background: blue;
}対応ブラウザ
| IE | Chrome | Safari | Firefox | iOS | Android | |
|---|---|---|---|---|---|---|
| box | ☓ | △ 4〜20 | △ 3.1〜6.0 | △ 2〜21 | △ 3.2〜6.1 | △ 2.1〜4.3 |
| flexbox | △ 9 | ☓ | ☓ | ☓ | ☓ | ☓ |
| flex | ◯ 10〜 | △ 21〜27 ◯ 28〜 |
◯ 6.1〜 | ◯ 22〜 | △ 7〜 | ◯ 4.4〜 |
◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
参考URL
CSS Flexible Box Layout Module Level 1 - CSS3 - W3C
登録日 : 2015年02月18日 最終更新日 : 2015年4月26日