flex-flow

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

flex-flowプロパティflex-directionプロパティflex-wrapプロパティをまとめて指定できるプロパティです。

以下のようにflex-directionプロパティの値、flex-wrapプロパティの値をスペース区切りで記述します。

.selector{
	flex-flow:[flex-direction] [flex-wrap];
}

具体的には、以下の指定を

.flex{
	display : -ms-flexbox; /* for IE10 */
	display : -webkit-flex; /* for old webkit browser */
	display : flex;
	-ms-flex-direction : row; /* for IE10 */
	-webkit-flex-direction : row; /* for old webkit browser */
	flex-direction : row;
	-ms-flex-wrap : nowrap; /* for IE10 */
	-webkit-flex-wrap : nowrap; /* for old webkit browser */
	flex-wrap : nowrap;
	padding:2px;
	background: black;
}

以下のように省略して記述することが可能です。

.flex{
	display : -ms-flexbox; /* for IE10 */
	display : -webkit-flex; /* for old webkit browser */
	display : flex;
	-ms-flex-flow : row nowrap; /* for IE10 */
	-webkit-flex-flow : row nowrap; /* for old webkit browser */
	flex-flow : row nowrap;
	padding:2px;
	background: black;
}

対応ブラウザ

IE Edge Chrome Safari Firefox iOS Android
flex-flow △ 10
○ 11
○ 12〜 △ 21〜
○ 29〜
△ 6.1〜
○ 9〜
△ 18〜
○ 28〜
△ 7.1〜
○ 9〜
○ 4.4〜

◯は実装済み、△はベンダープレフィックス付の実装、☓は未実装です。

登録日 : 2015年10月07日 最終更新日 : 2015年10月8日

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

検索

スポンサードリンク

バージョン

リファレンス