“flex-flow”プロパティ:フレックス・アイテムの配列方法｜CSS－havin' a coffee break

＃

概要

初期値	“flex-direction: row;” “flex-wrap: nowrap;”
適用対象	フレックス・アイテム
継承	No
パーセント値	パーセント値は指定できません
計算値	一括指定が対象とする各プロパティの定義に依る
アニメーション	一括指定が対象とする各プロパティの定義に依る

“flex-flow”プロパティはフレキシブルボックスレイアウトでフレックス・アイテムの主軸の向きと、フレックス・アイテムを複数行に配列するかどうかを指定する以下のプロパティの一括指定プロパティです。

サンプルコード



div { flex-flow: row wrap;}

＃

値

値	説明
<'flex-direction'>	“flex-direction”プロパティの値
<'flex-wrap'>	“flex-wrap”プロパティの値
共通キーワード

値は“<'flex-direction'>”、“<'flex-wrap'>”をそれぞれ1個ずつホワイトスペースで区切って記述します。値を記述する順番は自由で、初期値のままで良い場合は値を省略できます。

＃

仕様書

定義されている仕様書



flex



<'flex-direction'>
<'flex-wrap'>

＃

フレックス・アイテムの配列方法を指定する



<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>

“flex-flow”プロパティ:フレックス・アイテムの配列方法

プロパティについて

概要

サンプルコード

値

仕様書

使用例

フレックス・アイテムの配列方法を指定する