<ul>と<li>でダララーっと並べて、
CSSでいじって揃えてますよね。
でも「項目数が変わっても中央揃えにしたい！」みたいなのって、結構ややこしい。
そこで見つけたのがこれ！
というか2015年とか一昨年の記事だけど！！
これからのCSSレイアウトはFlexboxで決まり！
http://www.webcreatorbox.com/tech/flexbox/
→mana：@chibimanaさんによる記事
IE10以下、OperaMini、Androidブラウザの4.3以下ではNGだけど、
それ以外は問題なく使えるとのこと。
また、各種対応を拡張するjsもあるって。
Flexboxとはー！
.main-nav { display: flex;}
こんなふうにしてあげるだけで、
横並び表示してくれるCSS。
floatしなくていいし、display:boxなんかは削除対象になってる。
display:box削除の経緯についてはこちらが詳しいっすね。
→IEKAUチーム (id:ie-kau)さんの記事
どうやらdisplay:boxの後継がdisplay:flexになったようだ。
中央揃えもかんたん！
.main-nav { display: flex; justify-content: center;}
こうすると、うまい具合に中央に揃う。
高さ揃えもかんたん！
中身が複数行にわたっている時でも、
display:flexだけで各要素の高さがバラバラに詰まったりせず、
最大の高さに自動で揃う。
高さの位置揃えまでも！
.main { align-items: center;}
としておくと、上下位置での中央揃えになっちゃう。すごい。
ちなみにflex-endで下揃え。
まとめ！
Flexboxは聞き分けが良い子！
まだまだいろんな機能が1行で実装できるみたい。
詳細はここでバッチリ解説してくれてます。
CSS3 Flexbox の各プロパティの使い方をヴィジュアルで詳しく解説
→コリスさん@colisscomの記事
投稿が2016年12月なので、まだまだ旬ですかね。
実際にいじってみるとき、こちらを見ながらやるのがオススメです。
めっさ丁寧に解説されてて、しかも網羅的！
長きに渡るfloatとの交際は、もう終わりを告げる頃合い。
とてもとてもお世話になったけど、もっといい子に出会ってしまったんだ。
0 コメント:
コメントを投稿