“flex-wrap”プロパティ:フレックス・アイテムを複数行に配列｜CSS－havin' a coffee break

＃

概要

初期値	“flex-wrap: nowrap;”
適用対象	フレックス・コンテナ
継承	No
パーセント値	パーセント値は指定できません
計算値	指定されたキーワード
アニメーション	離散

“flex-wrap”プロパティはフレキシブルボックスレイアウトでフレックス・アイテムを1行に配列するのか、それとも複数行に配列するのかを指定するプロパティです。

フレックス・アイテムがフレックス・コンテナに収まりきらない場合でも既定では1行に配列されてフレックス・コンテナからはみ出しますが、“flex-wrap”プロパティによる指定で折り返して複数行に配列することもできます。

サンプルコード



div { flex-wrap: wrap;}

＃

値

値	説明
row	フレックス・アイテムは1行に配列されます (フレックス・コンテナ内の領域が足りない場合にはあふれる場合があります。)
wrap	フレックス・アイテムは複数行に配列されます (フレックス・コンテナ内の領域が足りない場合には折り返して配列します。)
wrap-reverse	フレックス・アイテムは複数行に配列されます (“wrap”と同じですが交差軸の方向が逆向きになり、折り返した次の行は逆側に配置されます。)
共通キーワード

＃

仕様書

定義されている仕様書



flex-wrap



nowrap
wrap
wrap-reverse

＃

フレックス・アイテムを1行に配列する



<div class="flex-contain">


<p class="item-1">


黒猫


</p>



<p class="item-2">


白猫


</p>



<p class="item-3">


三毛猫


</p>



<p class="item-4">


茶トラ猫


</p>


</div>

＃

フレックス・アイテムを複数行に配列する



<div class="flex-contain">


<p class="item-1">


黒猫


</p>



<p class="item-2">


白猫


</p>



<p class="item-3">


三毛猫


</p>



<p class="item-4">


茶トラ猫


</p>


</div>