便利すぎるflexbox！
2019.01.20
レイアウトの左右を入れ替えるレベルだと、単に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は便利な使い方ができる。
それは今後ということで…(汗)
BLOG