WEB STUDiO blog:カラフル

colorful

【コレだけで数年飯が食える】css3のFlexboxの使い方

志村剛

2018/03/05

Business

クリエイティブチーム コーダーチームの志村です。
今回は表題通り、覚えれば数年cssで飯が食えるようになる(であろう)技術をご紹介します。

flexboxとは正確には CSS Flexible Box Layout Moduleという物で複雑化したWebページのレイアウトを組みやすくする事を目的として開発された新しいレイアウトモジュールです。
レスポンシブレイアウトとの相性の良さや、IE9,10のサポート終了も伴って現在のレイアウトの主流になりつつあります。

これのすごい所は、今までcssで実現するのが難しかった複雑なレイアウトも、flexboxを使って簡単に指定出来るようになっている点です。
例えば以下のような事が可能です。

1.CSSを一行プラスするだけで横並びにできる!
2.横並びになった要素の高さの調整が可能!簡単に上下中央揃え!
3.要素を好きな順序に並び替えられる!
4.スペースの操作も自由自在!
5.カラムの横幅の指定が簡単&柔軟!

もうひとつ使える点としては、floatプロパティよりもパフォーマンスが良い!使いやすいという点にあります。
今までは横並びとなるとfloatプロパティ、又はdisplayプロパティを使って対応していた箇所もflexboxを使って指定する事ができます。
floatプロパティで必要(面倒)であった回り込み回避(clearfix、overflow)の指定がいりません! 

新しい技術になるので、使いこなすまでにはちょっとコツがいりますが、覚えてしまうと今までは何だったのか!!というぐらいに使えますよ!
以下にご紹介していきます。

Flexboxで指定できるプロパティ

flexboxで使用出来るプロパティをいくつか紹介いたします。
まずは冒頭でご紹介した、「1.CSSを一行プラスするだけで横並びにできる!」をご紹介いたします。

元となるナビゲーションメニューを追加いたします。

わかりやすいようにcssを追加いたします。

See the Pen 【flexbox】display:flex by takeshi.shimura (@shimura4816job) on CodePen.

追加したスタイルにdisplay: flex;を追加すると…

 

 

横並びになりました!

See the Pen 【flexbox】display:flex1 by takeshi.shimura (@shimura4816job) on CodePen.

 

横並びになった要素の高さの調整が可能!簡単に上下中央揃え!

justify-content や、align-items などの指定で、横並びにした要素の縦、横の表示位置が設定出来るようになりました。
今までは実現が難しかった上下中央揃えが簡単に!

justify-content は水平方向の揃え方、align-itemsは垂直方向の揃え方をそれぞれ指定する事が出来ます。


上下中央揃えが簡単に実現できます。もちろん幅を変更しても上下中央揃えが維持されます。

コンテンツの一番多い要素の高さに合わせて自動的に広げて、高さを揃える事も可能になりました。

justify-content: centerと指定すると…

ボックスの高さが揃いました!今までは高さを固定値でしたり、jsで制御したりしていた事が不要になりました!

 

 

要素を好きな順序に並び替えられる!

レスポンシブレイアウトの際にPCとSPで要素の並びが違うようにしたい…という時は今までは別の方法で対応するしかありませんでした。
ですが、order を使えば、ボックス内の順番を変更する事が可能です。

order値設定前:
初期設定時は降順(1~5)に並んでいる

order値設定後:
2番目のリスト:4番目に変更
4番目のリスト:2番目に変更。他は変更なし

指定通りに変更されました!

 

 

 

対象ブラウザ

現在のモダンブラウザでflexboxを使う事ができます。safari適用させたい場合は-webkit-のベンダープレフィックスが必要です。
IEも10から対応は可能ですが、いくつかバグがあります…が簡単なレイアウト指定であれば問題なく使う事ができます。

最新バージョンであれば、PC、SPブラウザ、端末(OS)関係なく使う事が可能です。
 
参考:caniuse.com
https://caniuse.com/#search=flexbox
参考:ベンダープレフィックス
http://www.htmq.com/csskihon/603.shtml

今回説明した以外にも、flexboxで実現出来る要素は多くあります。
よかったら、以下参考にしてみてください。

参照:
・CSS3 Flexbox の各プロパティの使い方を詳しく解説
http://coliss.com/articles/build-websites/operation/css/css3-flexbox-properties-by-scotch.html

所属:クリエイティブチーム コーダー 最近いきなりステーキにハマりました!

Recommend Postおすすめ記事

TOPへ