display:inline-flex

このエントリーをはてなブックマークに追加

display:inline-flexはインラインFlexコンテナボックスを作成するためのdisplayプロパティです。

display:flex」とは違い作成したFlexible Boxはインラインボックスとして振る舞われます。

.selector{
	display:inline-flex;
}

もともと「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

3 Flex Containers: the flex and inline-flex display values - CSS3 - W3C

登録日 : 2015年04月24日 最終更新日 : 2015年4月26日

同じカテゴリー(Flexible Box)のエントリー

検索

スポンサードリンク

バージョン

リファレンス