CSS3

プロパティ

flex-direction

→●、mdn

flex アイテムのフロー方向。

flex-direction プロパティは、flex コンテナの主軸の方向を設定することにより、flex アイテムが flex コンテナの中で どのように配置されるかを指定する。これは、一連の flex アイテムがレイアウトされていく方向を決定する：

row

flex コンテナの主軸は、現在の書字モードの行内軸と同じ方位になるようにされる。主始端／主終端 の方向は、現在の書字モードの［ 行内始端／行内終端］方向に等価になる。

<DIV style="border:1px solid red; width:200px; height:170px;
 display:flex;
 flex-direction:row;
">
 <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>

row-reverse

主始端と主終端 の方向が入れ換わることを除き、row と同じ。

<DIV style="border:1px solid red; width:200px; height:170px;
 display:flex;
 flex-direction:row-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>

column

flex コンテナの主軸は、現在の書字モードのブロック軸と同じ方位になるようにされる。主始端／主終端 の方向は、現在の書字モードの ブロック始端／ブロック終端 の方向に等価になる。

<DIV style="border:1px solid red; width:200px; height:170px;
 display:flex;
 flex-direction:column;
">
 <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>

column-reverse

主始端と主終端 の方向が入れ換わることを除き、column と同じ。

<DIV style="border:1px solid red; width:200px; height:170px;
 display:flex;
 flex-direction:column-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>

注記： row-reverse／column-reverse 値は、ボックスの順序付けを“逆順”にするものではない ─ writing-mode、direction プロパティ[CSS3-WRITING-MODES] と同様に、それらはフローの方向のみを変化させる。塗り、発話、逐次的ナビ の順序は影響されない。

関連

flex-flow、flex-wrap。order。

テスト