flex-boxで子要素の順番を鮮やかに（鮮やかに）入れ換える

flex-boxで子要素の順番を入れ換える

はじめに

JavaScriptを使わないとhtmlの中身の順番を入れ換えることはできない。

そういう風に思ってる時代が私にもありました。

順番を変えられる、そうdisplay: flex;ならね

style.css

.ul {
    display: flex;
}

.ul li:nth-child(2) {
    order: 2;
}

.ul li:nth-child(3) {
    order: 1;

何してんの？

親に大正義、displaｙ: flex;して、
順番を替えたい子要素にorder: 1;とか2
とか振って...終わりっ。

注意すべきは、orderのデフォルト値は0になります。

つまり、上の例だと指定されていないliは0になるので、その次に1→2となりますね。

何に使うのこんなの

横並びに下ものをスマホレイアウトの時に順番を変えつつおとしたいことって割と多いと思います。いや、多いです。

そんな時に、これはmedia queryで消して、同じものを別の順番のとこに用意して...みたいなものはスマートではありません。

同じ記述を二つ（以上）することを許すとその箇所を修正する際に、2度でまになるし、可読性も落ちますね。
他人が読んで分かりやすいコードを書きましょう。

最後に

現状（2018年4月）IE11、Edge（!?）でサポートされていないようです、あぁあんん？？

ベンダープレフィックスは書いておきましょう。

style.css

.ul {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.ul li:nth-child(2) {
    -webkit-box-ordinal-group: 3;
    -webkit-order: 2;
    -ms-flex-order: 2;
    order: 2;
}

.ul li:nth-child(3) {
    -webkit-box-ordinal-group: 2;
    -webkit-order: 1;
    -ms-flex-order: 1;
    order: 1;
}