Flexboxを使って孫要素まで高さを揃える方法


cssで要素を横並びにするにはいくつか方法がありますが、
中でもflexboxは子要素の高さがデフォルトで揃ってくれるから好き！

基本的な使い方は、親要素に`display:flex`を指定するだけ。
子要素が横並びになり、高さも揃ってくれます。

<p data-height="265" data-theme-id="0" data-slug-hash="gvBRGb" data-default-tab="html,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="flexbox01" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/gvBRGb/">flexbox01</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

`flex-wrap: wrap`で折り返しを設定して、
`justify-content: space-between`で両端に合わせるだけで、
とっても簡単にキレイなレイアウトが組めちゃいます。

flexboxを知ってから、横並びレイアウトがスムーズに組めるようになりました。

[Can I Use](https://caniuse.com/#search=flex)で確認すると、
IE11は部分的な対応となっていますが、主に古いver.のバグのようです。

バグに関しては、[flexboxのバグに立ち向かう（flexboxバグまとめ）](https://qiita.com/hashrock/items/189db03021b0f565ae27)がとっても参考になります。
ありがとうございます！

##子要素は高さが揃うけど、孫要素は揃わない？

flexboxでちょっとハマる箇所は、
子要素までは高さが揃うけど、
孫要素までは高さが揃ってくれないところ。

例えば、リストの中にリンクを指定したい場合、
リンクの範囲もリストに合わせて広がって欲しいですよね。

通常`a`タグに`display:block`を指定して、リンクの範囲を広げますが、
flexboxの孫要素はリンク範囲が広がってくれません。

<p data-height="265" data-theme-id="0" data-slug-hash="gvBLmd" data-default-tab="html,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="flexbox02" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/gvBLmd/">flexbox02</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

*分かりやすく、`li`タグを黄色、`a`タグをグレーで色付けしています。


##孫要素にも高さを指定する

<p data-height="265" data-theme-id="0" data-slug-hash="jZeLPZ" data-default-tab="html,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="flexbox03" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/jZeLPZ/">flexbox03</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

孫要素の`a`タグにも`height: 100%`を指定してみます。

###孫要素まで高さが揃った？

一見、孫要素まで揃ったように見えますが、
実は、iPadの実機で見るとこんな感じになってます。

![01.png](https://qiita-image-store.s3.amazonaws.com/0/139029/852bffb3-0967-1ede-22d4-48d66d1007c9.png "01.png")

揃ってないですね。

##flexboxを使って孫要素の高さまで揃える

今度は、flexboxを使って孫要素の高さも揃えてみます。

<p data-height="265" data-theme-id="0" data-slug-hash="rJqjor" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="flexbox04" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/rJqjor/">flexbox04</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

###孫要素まで揃った！

どういう事かと言うと、
単純に、子要素(`li`タグ)にも`display:flex`を指定してしてあげれば、
子要素の子要素（つまり、孫要素`a`タグ）の高さが揃ってくれるという事です。

flexboxはデフォルト値に、
一番高い要素に合わせてコンテンツが伸びる`align-items: stretch`が設定されているため、
このように高さが揃ってくれます。

この時、孫要素に`width`を忘れずに設定します！

これでiPadも、孫要素まで高さが揃いました。

![02.png](https://qiita-image-store.s3.amazonaws.com/0/139029/cf738567-a16f-ccf2-315f-65f595c28c71.png "02.png")

##flexboxを使って、中央寄せもしちゃおう！

さらに、テキストを縦横中央に揃えてみます。

<p data-height="265" data-theme-id="0" data-slug-hash="rJqyOo" data-default-tab="css,result" data-user="kfunnytokyo" data-embed-version="2" data-pen-title="flexbox05" class="codepen">See the Pen <a href="https://codepen.io/kfunnytokyo/pen/rJqyOo/">flexbox05</a> by kayukihashimoto (<a href="https://codepen.io/kfunnytokyo">@kfunnytokyo</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

孫要素の`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](https://qiita.com/kfunnytokyo/items/e8b9c76a7e0dede33715)