cssで要素を横並びにするにはいくつか方法がありますが、
中でもflexboxは子要素の高さがデフォルトで揃ってくれるから好き！
基本的な使い方は、親要素にdisplay:flexを指定するだけ。
子要素が横並びになり、高さも揃ってくれます。
See the Pen flexbox01 by kayukihashimoto (@kfunnytokyo) on CodePen.
flex-wrap: wrapで折り返しを設定して、
justify-content: space-betweenで両端に合わせるだけで、
とっても簡単にキレイなレイアウトが組めちゃいます。
flexboxを知ってから、横並びレイアウトがスムーズに組めるようになりました。
Can I Useで確認すると、
IE11は部分的な対応となっていますが、主に古いver.のバグのようです。
バグに関しては、flexboxのバグに立ち向かう（flexboxバグまとめ）がとっても参考になります。
ありがとうございます！
子要素は高さが揃うけど、孫要素は揃わない？
flexboxでちょっとハマる箇所は、
子要素までは高さが揃うけど、
孫要素までは高さが揃ってくれないところ。
例えば、リストの中にリンクを指定したい場合、
リンクの範囲もリストに合わせて広がって欲しいですよね。
通常aタグにdisplay:blockを指定して、リンクの範囲を広げますが、
flexboxの孫要素はリンク範囲が広がってくれません。
See the Pen flexbox02 by kayukihashimoto (@kfunnytokyo) on CodePen.
*分かりやすく、liタグを黄色、aタグをグレーで色付けしています。
孫要素にも高さを指定する
See the Pen flexbox03 by kayukihashimoto (@kfunnytokyo) on CodePen.
孫要素のaタグにもheight: 100%を指定してみます。
孫要素まで高さが揃った？
一見、孫要素まで揃ったように見えますが、
実は、iPadの実機で見るとこんな感じになってます。
揃ってないですね。
flexboxを使って孫要素の高さまで揃える
今度は、flexboxを使って孫要素の高さも揃えてみます。
See the Pen flexbox04 by kayukihashimoto (@kfunnytokyo) on CodePen.
孫要素まで揃った！
どういう事かと言うと、
単純に、子要素(liタグ)にもdisplay:flexを指定してしてあげれば、
子要素の子要素（つまり、孫要素aタグ）の高さが揃ってくれるという事です。
flexboxはデフォルト値に、
一番高い要素に合わせてコンテンツが伸びるalign-items: stretchが設定されているため、
このように高さが揃ってくれます。
この時、孫要素にwidthを忘れずに設定します！
これでiPadも、孫要素まで高さが揃いました。
flexboxを使って、中央寄せもしちゃおう！
さらに、テキストを縦横中央に揃えてみます。
See the Pen flexbox05 by kayukihashimoto (@kfunnytokyo) on CodePen.
孫要素のaタグにもdisplay:flexを設定し、
justify-content: centerで横中央に配置、
align-items: centerで縦中央に配置します。
これで孫要素まで全て中央にギュギュっと揃える事が出来ました！
おわり。
flexboxの次はGrid Layout？
float、flexboxと来て、今度はGrid Layout？
巷で話題のGrid Layout。
今までfloatやflexを駆使して実装していたレイアウトも、
Grid Layoutでは簡単に実装できるかも？
レスポンシブにも対応させるレイアウトで、grid Layoutも試してみました。
モダンブラウザで試すGrid Layout