２カラムのレイアウトや互い違いの配置などおしゃれな見た目のサイトを作ってみたいですよね？
でもレスポンシブ対応も合わせてするにはハードルが高いような…。
そんな時は今回ご紹介するflexboxがとにかく便利です！
カンタン！気が利く！レスポンシブ対応もOKのステキな奴！
そんなflexboxについて今回から数回に分けてお話します。
今回はflexboxを使うと何ができるのか、どんないいことがあるのかイメージを持ってもらうためにざっくりと概要をお話します。
ちょっとややこしいところもあるけど勉強していきましょう！
flexboxで何ができるの？
その名の通り、コンテナの中にある要素をフレキシブルに並べ替えてくれるものです。
上下左右の揃えや等間隔に配置するなど、コンテンツの並び方を簡単に設定することができます。
例としてこのようなものを作ってみました。
See the Pen display:flex; by ろぼこん/Webデザイン勉強中 (@rbcn_wd) on CodePen.
3つのchildrenというクラスをつけたdivを、parentというクラスをつけたdivで囲っているだけです。
この例のイメージは5つのchildrenっていう名前の箱を１つのparentっていう名前の箱、コンテナに詰め込んだっていう感じ。
このコードでは下のようになります。
注：分かりやすくするために５つのchildrenにはそれぞれ色をつけて番号をふっていますが、ごちゃごちゃするのでコードでは省いています。
今はクラスparentには何も指定されていません。
そのためクラスchildrenは幅10％、高さ100pxで縦に並んでいます。
flexをつけてみる
ここでコンテナとなるクラスparentにdisplay:flexを指定するとどうなるでしょうか
CSS
.parent {
display:flex;
}コードはこれ以外何も触っていません。たった一行追記しただけです。
結果を見てみましょう。
クラスchildrenが全て横並びになってますね！
横並びにするだけじゃなくて、いろいろできますよ。
例えば均等にスペースを作ってみたりとか
端っこはスペースを無くしてみたりとか
この２つの例はもう一行追記するだけで実装できます。
均等割りにするのはデザインの基本ですから、こんなに簡単にできてステキでしょ？
flexboxのいいところ
flexboxのいいところはざっくり2点だと思います！
1. 簡単に実装できる
2. レスポンシブ対応しやすい
1.簡単に実装できる
先ほどの例の通り、親要素のCSSにdisplay:flex;と記述します。
これを記述するだけで、親のすぐ下にある要素を全部横並びにしてくれます。
あとはjustify-contentというプロパティを使って並び方を調整します！
justify-contentにspace-aroundを指定すると子要素の左右に均等にスペースを入れてくれて、space-betweenを指定すると端っこはスペースを無くして均等に配置してくれます。
.parent {
/*親要素に指定する*/
display:flex;
/*子要素の横に均等にスペースを作って配置*/
justify-content:space-around;
/*端っこはスペースを無くして均等に配置*/
justify-content:space-between;
}2.レスポンシブ対応しやすい
今やウェブページはスマホ対応が必須で、PC用のデザイン、スマホ用のデザインが全く同じということはありません。
というのもスマホは縦長の画面なので、横に並んだものは文字が小さくて見にくかったり、スクロールしなければならなかったり、横並びでは都合の悪いことがあるからです。
だからPCでは横並び、スマホでは縦並びと並びや揃えが切り替わるデザインをよく見ますよね。
flexboxは基本的に横並びにするために使いますが、親要素にflex-directionというプロパティを設定することで横並びになっていた要素を縦並びに変更できます！
それのおかげで自由に縦横の並び方向を指定できますし、揃えや折り返しの設定もできるため、flexboxはレスポンシブ対応の時にも重宝しますよ。
おすすめ勉強法
1. ゲームで体験！カエルを葉っぱに乗せてやれ flexboxfroggy
2. これを見れば怖いもの無し！ チートシート
1.ゲームで体験！カエルを葉っぱに乗せてやれ Flexboxfroggy
Flexbox FroggyA game for learning CSS flexboxflexboxfroggy.com
flexboxを使って緑黄赤のカエルをそれぞれ同じ色の葉っぱの上に乗せてあげるゲームです。
ヒントがあるのでCSSの書き方が少しわかる人ならいきなりチャレンジしても大丈夫です！
ヒントは少ないので難しいかもしれませんが…。
全24問でぼくは10分くらいで完走できるようになりました！
とはいうものの早くクリアできることに意味はありません。
おすすめはいろいろ試してみてどんな風に動くかを確かめてみることです！
2.これを見れば怖いもの無し！ チートシート
日本語対応！CSS Flexboxのチートシートを作ったので配布しますFlexboxとはFlexible Box Layout Moduleのことで、その名の通りフレキシブルで簡単にレイアウトwww.webcreatorbox.com
webクリエイターボックスさんがチートシートを作成して無料で配布されています！
ぼくも慣れないうちはチートシートを印刷して手元に置いたまま作業していました。画面を切替なくてもパッとみることが出来るので印刷するのはおすすめです！
webクリエイターボックスさんは他にも役に立つ記事がたくさんあるので、まだ読んだことがない方は必見ですよ！
まとめ
今回はflexboxについてざっくりとお話ししました。
flexboxはカンタンに使えるくせに並びや揃えをビシッと決めてくれるステキな奴です。
flexboxが得意なところ、苦手なところを見抜けられるようになれば、さらに効率よくコーディングできるようになるんじゃないでしょうか。
次回以降、実例を紹介しながら使い所を見てみたり、ちょっと注意が必要なところなどを紹介していこうと考えています！
