CSS3

プロパティ

order

→●、mdn

フレックス アイテムの陳列順序。

order プロパティは、一連の flex アイテム を［序数があてがわれたいくつかのグループに仕分ける］ことを通して、［flex コンテナの中に flex アイテムたちが現れる順序］を制御する。それは、［flex アイテムがどのグループに属するかを表す序数］を指定する、1 個の <integer> を値にとる。

<integer> ○

<DIV style="display:flex; border:1px solid black">
 <DIV style="order:2; border:1px solid red">1</DIV>
 <DIV style="order:1; border:1px solid red">2</DIV>
 <DIV style="order:3; border:1px solid red">3</DIV>
</DIV>

flex コンテナは、その内容を、order プロパティにより 改変された文書順序 で ─ すなわち、序数が最低のグループから順に ─ レイアウトする。同じ序数のグループに属するアイテムたちをレイアウトする順序は、ソース文書に現れる順序に従う。これらによる順序は、塗り順序 [CSS2] にも、flex アイテムたちがソース文書内で並び替えられていたかのように影響する。flex コンテナ の子のうち、絶対的に位置されたもの【したがって、flex アイテムではない】は、flex アイテムとの相対的な塗り順序を決定する目的においては、序数 0 のグループに属するものと扱われる。

¶図省く

関連

flex-flow、flex-wrap。

テスト