Edited at

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

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の実機で見るとこんな感じになってます。

01.png

揃ってないですね。


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

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

See the Pen flexbox04 by kayukihashimoto (@kfunnytokyo) on CodePen.


孫要素まで揃った!

どういう事かと言うと、

単純に、子要素(liタグ)にもdisplay:flexを指定してしてあげれば、

子要素の子要素(つまり、孫要素aタグ)の高さが揃ってくれるという事です。

flexboxはデフォルト値に、

一番高い要素に合わせてコンテンツが伸びるalign-items: stretchが設定されているため、

このように高さが揃ってくれます。

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

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

02.png


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