LoginSignup
103

More than 3 years have passed since last update.

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

Last updated at Posted at 2018-02-26

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

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
103