読者です 読者をやめる 読者になる 読者になる

e-mono

日々の出来事や新しく購入したアイテムの紹介などを書いてます。

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

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

まず以下のようなコードを書きます。 [codepen_embed height=“265” theme_id=“0” slug_hash=“wgKZqE” default_tab=“html,result” user=“miyabi0307”]See the Pen wgKZqE by yamamoto (@miyabi0307) on CodePen.[/codepen_embed]

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

[codepen_embed height=“265” theme_id=“dark” slug_hash=“XpmwrN” default_tab=“result” user=“miyabi0307”]See the Pen XpmwrN by yamamoto (@miyabi0307) on CodePen.[/codepen_embed]

軽く装飾しました。

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

CSS3のFlexを使ってみると

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

[codepen_embed height=“265” theme_id=“dark” slug_hash=“PWPgMX” default_tab=“result” user=“miyabi0307”]See the Pen PWPgMX by yamamoto (@miyabi0307) on CodePen.[/codepen_embed]

なんということでしょう。たった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と付け加えるだけ。

[codepen_embed height=“265” theme_id=“dark” slug_hash=“RKWOXB” default_tab=“result” user=“miyabi0307”]See the Pen RKWOXB by yamamoto (@miyabi0307) on CodePen.[/codepen_embed]

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

他にもflexを使えば、今まではJSを使って高さ取得とか色々やっていた作業が・・・・ [codepen_embed height=“265” theme_id=“dark” slug_hash=“Xpmwbp” default_tab=“result” user=“miyabi0307”]See the Pen Xpmwbp by yamamoto (@miyabi0307) on CodePen.[/codepen_embed]

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

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

スポンサーリンク