orderでフレックスアイテムの配置順序を指定【CSS】

orderプロパティは、フレックスアイテムを配置する順序を指定するプロパティです。

通常、フレックスアイテムはHTMLソースで記述された順番に配置されますが、orderプロパティを使うことによってその順番を変えることができます。

orderの値の指定方法

orderプロパティは、フレックスアイテムを配置する順序を整数の値で指定し、負の値を指定することもできます。

指定された整数の値が小さい要素から順番に配置され、同じ値を指定した場合は、HTMLソースに記述された順番に配置されます。

ちなみにフレックスアイテムとなる子要素すべてに初期値として0が指定されています。

なので、次の例では、それぞれの要素にまずorderプロパティで1〜6までの値を順番に指定しています。

要素の順番を入れ替えるため、box2にorderプロパティで4を指定し、box4にorderプロパティで2を指定しました。

すると上記のように、box2とbox4の順番が入れ替わります。