display:inline-box
display:inline-boxはインラインFlexコンテナボックスを作成するためのdisplayプロパティです。
もともと「display:inline-box」と定義されていたが途中で「display:inline-flexbox」に変更され、最終的に「display:inline-flex」なったため少し古いブラウザでベンダープリフィックス付きで実装されている。
「display:box」とは違い作成したFlexible Boxはインラインボックスとして振る舞われます。
.selector{
display:inline-box;
}
もともと「display:inline-box」と定義されていたが途中で「display:inline-flexbox」に変更され、最終的に「display:inline-flex」なったため古いブラウザでは実装が異なるケースがあり、ブラウザ実装などを考慮すると以下のようにベンダープレフィックスを付加すると幅広いブラウザサポートが可能です。
.selector{
display : -webkit-inline-box;
display : -ms-inline-flexbox;
display : -webkit-inline-flex;
display : inline-flex;
}
対応ブラウザ
IE | Chrome | Safari | Firefox | iOS | Android | |
---|---|---|---|---|---|---|
inline-box | ☓ | △ 4〜20 | △ 3.1〜6.0 | △ 2〜21 | △ 3.2〜6.1 | △ 2.1〜4.3 |
inline-flexbox | △ 9 | ☓ | ☓ | ☓ | ☓ | ☓ |
inline-flex | ◯ 10〜 | △ 21〜27 ◯ 28〜 |
◯ 6.1〜 | ◯ 22〜 | △ 7〜 | ◯ 4.4〜 |
◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。
参考URL
http://www.w3.org/TR/2009/WD-css3-flexbox-20090723/
登録日 : 2015年04月25日 最終更新日 : 2015年4月26日