【css】display: flex;でflexboxの順番を変える方法

flexboxについて

flexboxはhtmlの親要素にcssのdisplay: flex;を記述することによって子要素をflexboxとして扱うことができます。flexboxにorder（順番）を指定すると子要素の順番をcssで入れ替えることができるすぐれものです。

わたしはなにとは言いませんが、はてなブログの広告の順番を入れ替えたかったので、はてなブログのデザインcssにフレックスボックスを応用して表示の順番を変えました。フレックスボックスを扱う場合はいくつかポイントがありますので そちらを解説します。

flexboxのsample(サンプル)コード

See the Pen flexbox by 最高秀作はSA2 (@onitikushou) on CodePen.

まず親要素にはクラス名parrentを付与し子要素にはクラス名childを付与しました。子要素は3つありますが、わかりやすくするためにchild1～というようにクラス名を別に記述しました。

parrentにdisplay: flex;を記述しフレックスボックスとして扱います。ここでのポイントはフレックスボックスは横ならびになるということです。横並びでもいいのですが、今回はボックスを縦並びにするためにflex-flow: column;を記述しました。

子要素のクラス名はchildですが文字を中央寄せにするためにjustify-content: center; と align-items: center;を記述しました。 子要素はorderプロパティを指定して任意の番号をわりふって子要素の順番を並べ替えることができます。

こちらのorderプロパティですが親要素がflexになってないと使えない（記述してもなにも変化がない）ので注意が必要です。

子要素もflexを指定できる

子要素のchildクラスですがこちらにもdisplay: flex;を記述しています。子要素もフレックスボックスにして孫要素があった場合に同じことができます。こんかいはjustify-contentプロパティを使うために子要素もflexにしただけですが、こちらの文字の上下中央よせのやり方を知っているとなにかと便利です。