CSS3

：

プロパティ

：

flex-flow

　 編集：2022.07.04 by T.A.

→●、mdn

フレックス アイテムのフロー方向と折り返し： 略式プロパティ。

名前 flex-flow
値 <'flex-direction'> || <'flex-wrap'>
初期値 個々のプロパティを見よ
適用対象 個々のプロパティを見よ
継承 個々のプロパティを見よ
百分率 個々のプロパティを見よ
算出値 個々のプロパティを見よ
正準的順序 文法に従う
アニメーション型 個々のプロパティを見よ

flex-flow プロパティは、［flex-direction、flex-wrap］プロパティを設定するための略式プロパティであり、flex コンテナの［主軸、交叉軸］を同時に定義する。

¶図説省く

<DIV style="border:1px solid red; width:150px; height:100px;
 display:flex; flex-flow:wrap;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:150px; height:100px;
 display:flex; flex-flow:row-reverse wrap;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:150px; height:150px;
 display:flex; flex-flow:column wrap;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:150px; height:150px;
 display:flex; flex-flow:column-reverse wrap;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>

<DIV style="border:1px solid red; width:150px; height:150px;
 display:flex; flex-flow:row-reverse wrap-reverse;
">
 <DIV style="flex-basis:50px; border:1px solid black">1</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">2</DIV>
 <DIV style="flex-basis:50px; border:1px solid black">3</DIV>
</DIV>
関連

flex-wrap。order。

テスト
HTML：

ここに表示
¶[Edge]？
HTML：

ここに表示
スクリプト：


スクリプト：



表示内容：
表示内容：