カラムの要素の並び替え。Flexボックス

flexボックス(枠線がflexボックス)は通常、左からのHTML要素順の横並びになるが、

一番目の要素

二番目の要素

flaxボックスに flex-direction: row-reverse; をつけると要素の横並びが右からの逆順になる。

一番目の要素

二番目の要素

左からの逆順の横並びにするためには、justify-content: flex-end をflexボックスにつける。

一番目の要素

二番目の要素

flexボックスの各要素に order:番号 をつけると横並びの順番を決められる。

一番目の要素
order: 2;

二番目の要素
order: 4;

三番目の要素
order: 1;

四番目の要素
order: 3;

よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

目次