37web

Webの知識やMac・iPhoneなどApple製品の便利なアプリなどを紹介

CSS3のFlexを覚えたらjQueryのコード量が激減しました

2017/02/22

CSS3になってからFlexという機能が盛り込まれました。
このFlexを使えば今まで時間のかかっていた作業があっという間に出来上がってしまいます。
実際に現場でも使いそうな記述を紹介してみます。

まず以下のようなコードを書きます。

See the Pen wgKZqE by yamamoto (@miyabi0307) on CodePen.0

まぁ、まだ何のCSS装飾もしてないので、こうなりますよね。
ここから少し色分けをしてわかりやすくします。

See the Pen XpmwrN by yamamoto (@miyabi0307) on CodePen.dark

軽く装飾しました。

さて、ここからタイトルを左端。メニューを右端に行くようにします。
今まででしたら、h1とulにfloatを付け加えてliにfloat入れて、あとはh1とulが横並びになるようにmarginなどで調整していたと思います。

CSS3のFlexを使ってみると

では、実際にflexを使ってみようと思います。
まずheader要素とul要素にdisplay:flexを加えてみます。

See the Pen PWPgMX by yamamoto (@miyabi0307) on CodePen.dark

なんということでしょう。たった1行付け加えただけで形が整いました。
親要素にdisplay:flexをかけると子供の要素が、横並びに鳴ります。

ということは、liを横並びにしたければ親要素のulにflexをかければよいということですね。

headerにflexをかける→h1とulが横並び
ulにflexをかける→liが横並び

というわけです。
さらに両端に飛ばしたいと思います。
display:flexの下に1行追加します。
justify-content:space-between;

space-betweenとは、要素を両端から均等割付してくれるというものです。
要素が3つあれば、3つを均等な余白で配置。
2つしかなければ両端に別れるということです。

そして、今のままだとulが上にくっついてしまっていてh1とのバランスが悪いです。
今まででしたらここからmarginで頑張るところですが、flexはそんなことしません。
align-items:centerと付け加えるだけ。

See the Pen RKWOXB by yamamoto (@miyabi0307) on CodePen.dark

いかがでしょうか。あっという間ですね。

他にもflexを使えば、今まではJSを使って高さ取得とか色々やっていた作業が・・・・

See the Pen Xpmwbp by yamamoto (@miyabi0307) on CodePen.dark

このように簡単に高さをそろえることが出来ます。Flexboxの特徴として、高さの異なるコンテンツが並んでも、自動的に一番高さを使うボックスに合わせてくれる機能があります。
これは非常に便利。

これはレスポンシブデザインでも使えますね。
それは次回にして、まずは簡単ですが、実践でもいきなり使えそうなFlexのご紹介でした。

-css, HTML, Web制作