しーぼーデザイン since 2003

blog ブログ

便利すぎる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は便利な使い方ができる。
それは今後ということで…(汗)

関連記事

Archive

Category

Recent Entry