解 説

順番を入れ替えるにはorderを使う。
「わしは、王(order)だ!
言うとおりに並びなさい」
こうやって覚えればよいのさ。。
dog_order
グルグル、グルグル!DogRoboはブリキ製のおそまつな出来具合のため、正確にワンワンと発音できません。グルグルの鳴き声は上機嫌な証拠と考えてよさそうです。

flexBoxレイアウトの初期状態
flex-img11

flexBoxレイアウトをorderプロパティで並べ順を変えた状態
flex-img12

HTMLコード

orderで並び変えたCSSコード

orderで並び変えたflexBoxレイアウト作成手順

  1. flexコンテナを作るための要素にdisplay:flexを設定
  2. flexアイテムにあたる要素にorderプロパティを設定
  3. orderプロパティに整数の値を設定する。数値が多きいほど右に並ぶ

プロパティの名前 order


初期値 0
適用対象 flex アイテム , および flex コンテナの子であって 絶対位置にされているもの
継承 されない
媒体 visual
算出値 指定値
アニメーション 可

FlexBoxレイアウトの並び方向の変更

横並びの場合は初期状態で左から右に向かって並びます。
また、縦並びの場合は初期状態で上から下へ向かって並びます。

横向き、縦向きの並ぶ方向を逆にするにはflex-directionプロパティを使います。
横向きなら row-reverse 縦向きなら column-reverse を使用します。

flexのフロー方向〜flex-directionプロパティ

プロパティの名前 flex-direction

値 row | row-reverse | column | column-reverse
初期値 row
適用対象 flex コンテナ
継承 されない
媒体 visual
算出値 指定値

flex-direction のサンプル

flex-direction プロパティは、flexコンテナの向きを決めるものです。右方向横に並べるか、左方向横にならべるか、上から下に並べるか、下から上に並べるかなどを決めます。

row
flex コンテナの方向は、通常は左から右方向。ちょうど、全ての子要素にfloat:leftを設定したような挙動になります。
row-reverse
右端から左方向に子要素がHTMLの書き順で並びます。全ての子要素にfloat:rightを設定したような挙動になります。
column
通常フローと同じ方位になります。 子要素はHTMLの書き順で、上から下に配置され、通常フローと同じような配置になります。
column-reverse
フローの方向が入れ換わります。つまり、子要素はHTMLの書き順で、下から上に配置されます。
**注意:-reverse 付きの値は、ボックスの順序を全て逆順にするものではなく、それらはフローの方向のみを変化させるものです。 塗り, 読み上げ, 逐次的ナビゲーションの順序は影響されません。

Flex Boxレイアウト関連記事