flex-wrap

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

flex-wrapはFlexアイテムがFlexコンテナボックスの横幅から溢れた際の挙動を制御するためのプロパティです。

flex-wrapは以下の値を取ることができます。

振る舞い
nowrap 改行せずFlexコンテナボックス内に収まろう縮小し表示される
wrap 改行し縮小しないで表示される
wrap-reverse 改行し縮小しないで表示されるが改行後のFlexアイテムは上部に表示される

図で示すと以下のようになります。

Flexible Boxのflex-wrapを表した図

このプロパティはFlexコンテナボックスに対して指定を行います。

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

sample

対応ブラウザ

当初は「box-lines」というプロパティで仕様策定が進められていた経緯があり、Androidに関しては4.3以前と比較的新しいブラザウザでもflex-wrapプロパティではなくbox-linesプロパティを利用しなくてはこの機能は利用できない。

IE Edge Chrome Safari Firefox iOS Android
box-lines △ 4〜 △ 3.1〜 △ 2〜 △ 3.2〜 △ 2.1〜
flex-wrap △ 10
○ 11
○ 12〜 △ 21〜
○ 29〜
△ 6.1〜
○ 9〜
△ 18〜
○ 28〜
△ 7.1〜
○ 9〜
○ 4.4〜

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

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

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

検索

スポンサードリンク

バージョン

リファレンス