こんにちは！フロントエンドエンジニアの市川です。
2018年最初の投稿です！本年もどうぞよろしくお願い致します。
今回はCSS3のプロパティ「Flexbox」の基本は抑えている方向けに、知っているとちょっと便利なテクニックをご紹介したいと思います。
私は遅ればせながら去年から実務で使い始めたのですが、
要素を横並びにする際、縦方向の中央揃えが簡単にできたり、余白を親の幅に合わせてとってくれたり、
とっても便利ですよね！
私が実際に実務で使う中で学んだ、Flexboxのテクニックを今回は3つご紹介致します。
目次
Flexboxとは…？
そもそも「Flexbox」とはなんなのか、簡単にご紹介致します。
Flexboxの「Flex」は「Flexible（柔軟）」の略です。つまり、レイアウトを柔軟に組むことができるCSS3のプロパティです。
使い所としては、要素を横並びにしたり、2カラム以上のレイアウトを作りたいときに活躍します。
今まではfloatやdisplay:tableなどを使うのが主流でしたが、cleafixでの解除や縦方向の中央揃えなど、やや面倒な部分がありました。
Flexboxの場合は上記プロパティよりも簡潔に書くことができ、
基本的には親要素へCSSプロパティ1つ指定するだけで横並びにすることができます。
2018年1月現在のブラウザ対応状況
下記Can I useの表の通りです。気になるIEは9以下が非対応ですが、10（ベンダープレフィックス有）、11は対応しております。
Androidの標準ブラウザも対応してますね！ChromeやFirefoxなどWebkit系のブラウザも対応しています。
実務でも使いやすくなりつつある印象です。
Can I useより引用
Tips1. 文字数の可変に対応した縦方向の中央揃え
下記のような横並びのリストを作る際、要素内の文字数が可変し1列になったり、2列になったりするシチュエーションは多々あるかと思います。
通常は親要素の<ul class="list">に対してdisplay:flex; align-items:center;をつける所ですが、
下記のように文字の高さに合わせて縦幅が固定されてしまいまい、ボックス①とボックス②の高さが合いません。
高さを合わせるためには、親要素<ul class="list">のalign-items:center;は指定せず、
子要素の<li class="list__item">に対してdisplay:flex; align-items:center;をつける必要があります。
これで可変を想定した横並びのリストになりました！
Tips2. 片方の幅を固定に、もう片方の幅を可変にする方法
通常は、固定したい要素にwidthを指定していても、可変する要素の幅が広がると固定幅が縮んでしまいます。
固定幅を保つには、可変する要素に対してflex: 1;を指定することで実現できます。
Tips3. 画像＋テキスト、テキスト＋画像の横並び要素を互い違いにする方法
下記のような画像＋テキスト、テキスト＋画像の互い違いのリストを作成する場合、
Flexboxのプロパティflex-directionを使うことで実現できます。
標準値は左から右へ並ぶrowが指定されていますが、今回は偶数の要素のみ逆の順番にしたいので、
.item:nth-child(even) { flex-direction: row-reverse; }と指定します。
HTML構造を変えずにCSSのみで順番を変えることができるので、要素の追加や削除にも柔軟に対応できますね！
おわりに
いかがでしたでしょうか？Flexboxはとても便利ですが、慣れるまでは少しわかりにくい部分があるかと思います。
Flexboxを使っていく中で「あれ？こういう時どうすればいいんだろう…？」と困っている方の参考に少しでもなれば幸いです。
今回は以上になります。最後までお読み頂きありがとうございました！