ブログ

レイアウトの左右を入れ替えるレベルだと、単にfloatの左右を逆にすれば問題なかったのだが、レスポンシブ化に伴い複雑に順序を変えたい時なんかにはfloatの変更だけでは追いつかなくなったきた。
そんな時にとても便利なのがフレックスボックス（Flexbox）!
使い方はかんたん！
親要素に

display:flex;
flex-direction: column;

子要素に

order:1;/*数字は順番*/

でorder順にレイアウトが変更される。
この他にもリスト(ul要素)のliの高さを揃えたい場合にも！
これは今までmin-heightで対応してたけど、数値を決めなくてはいけない面倒くささがあった。
しかし、Flexboxだと簡単！
ul要素に

display:flex;
flex-wrap:wrap;

を設定してli要素の高さ(height)をautoにしてあげれば
勝手に揃えてくれる！
これ以外にもFlexboxは便利な使い方ができる。
それは今後ということで…(汗)