こんにちは。菜笑なえです。
今回はCSSでFlexboxを使用しただけで要素の高さがそろう理由を解説していきます。
こちらの記事で要素の高さをそろえるサンプルコードとポイントは解説したので、コピペで使えるコードが見たい方はこちらもご覧ください。
Flexboxを使用しただけで要素の高さがそろう理由
まずはこちらのサンプルコードをご覧ください。
黄色の孫要素(p)の高さがそろって、青色の孫要素(p)の色が違います。
See the Pen display flex-failed01 by NaeSato (@N310) on CodePen.
この理由について解説していきます。
子要素(li)の高さがそろう理由
display:flex を指定した親要素(ul)には、最初からalign-items: stretchが設定されます。
align-items: stretch では、flexコンテナ(display:flexを指定している要素)に合わせて、子要素(li)の高さが自動で収縮する。という設定が行われています。
このとき、子要素(li)には、(align-itemsではなく)align-self: stretch がデフォルトで設定されている状態です。
align-self は子要素(li)自身の縦方向の位置をそろえるCSSにります。
このおかげで、
親要素にdisplay:flex を指定
→ 親要素(ul)にalign-items: stretchが設定
→ 子要素(li)にalign-self: stretch が設定
→ 子要素(li)の高さが自動で収縮して揃う
というなんとも便利な設定ができてしまいます。
親要素(ul) align-items: stretch の値を変更した場合
では、親要素(ul)のalign-items: stretch の値を変更した場合はどうなるのでしょうか？
align-items に設定できる値は、こちらにまとめてあります。
align-items－CSSリファレンス
今回は試しにalign-items: flex-end を設定しました。
See the Pen display flex-failed01′ by NaeSato (@N310) on CodePen.
わかりやすさのために、孫要素(p)の背景色は消しています。
align-items: flex-end にすると、子要素(li)がそろう位置が下になり、高さも収縮しないので、孫要素(p)の高さをそのまま反映しています。
なので、親要素(ul)にはalign-items: stretch が必須となります。
align-items よりalign-self が強い
先ほどのコードで、子要素(li)のalign-self: stretch 部分のコメントアウトを外してみてください。
子要素(li)の高さがそろいます。
これは、align-items は子要素(li)の設定を一括で行なっているのに対して、align-self は子要素(li)それぞれにstretch をセットしているからです。
なのでこの場合、align-items に何が書いてあっても、完全に無視をしてalign-self の設定が適応されるということになります。
孫要素(p)の高さがそろう理由
親要素(ul)のalign-self: stretch の自動収縮する効果は子要素(li)までにしか効きません。
なので、孫要素(p)の高さはそろっていないんですね。
ですが、
親要素(ul)にdisplay:flex を指定して、子要素(li)の高さがそろうのと同様に
子要素(li)にdisplay:flex を指定すると、孫要素(p)の高さがそろいます。
こちらの子要素(li)のコメントアウトを外してみてください。
See the Pen display flex-failed01 by NaeSato (@N310) on CodePen.
たったそれだけで、孫要素(p)の高さも一瞬でそろいます。
display:flex おそるべしです。
孫要素(p)をそろえる注意点
孫要素(p)の高さをそろえようと思った時に、孫要素(p)にこちらを設定する方もいるかと思います。
自分も最初はやりました。
p {
display:block;
height: 100%;
}これ一瞬そろっているように見えるんです。
というか、そろいます。
ただブラウザによってはheight: 100%;が効かず、結局そろってない！ということになるので、この方法はやめておきましょう。
子要素(li)にdisplay:flex を設定するほうが確実で安全です。
おわりに
今回はFlexboxを使用しただけで要素の高さがそろう理由を解説を解説していきました。
align-items がキーとなりましたね。
display:flex で高さがそろう。ということを知っている人は大勢いると思いますが、なぜそろうのか？まで理解していない方も多いと思うので、これを機に理解を深めてみてください。
根本を知っておかないと、うまく動作しないときに対処できないですからね。
今回のはいろいろコメントアウトしているので、コピペで使いたい方はこちらの記事のものをご利用ください。
