【CSS】flexの子要素をheight: 100%;にしつつalign-items: center;にしたい場合のやり方

【CSS】flexの子要素をheight: 100%;にしつつalign-items: center;にしたい場合のやり方CSS

display: flex;align-items: center;を指定すると子要素は縦に揃いますが、height: 100%;を指定しても効きません。

しかし、display: flex;のみだとデフォルト値のalign-items: stretch;のおかげでheightは100%っぽくなりますが、今度は縦に中央揃えができません。

子要素でheight: 100%;align-items: center;の状態を同時に実現する必要があったので、今回はこれのやり方を解説します。

 

スポンサーリンク

height: 100%;っぽくしつつalign-items: center;っぽくする方法

こんな感じのコードでいけました。

<div class="parent"> 
  <div class="child">子要素です</div>
</div>
.parent {
  display: flex;
}
.child {
  display: flex;
  align-items: center;
  height: 300px;
}

まず親要素をflexにします。この時align-itemsは指定しないようにするとデフォルトのalign-items: stretch;が当たって子要素がhegiht: 100%;っぽい感じになります(height: 100%;を指定するのはダメです)。

そして子要素にdisplay: flex;align-items: center;を指定します。すると親要素のalign-items: stretch;と子要素のalign-items: center;で子要素をheight; 100%;っぽい感じにしつつ縦に中央揃えができるようになります。

子要素にheightを固定pxで与えてもちゃんと縦に中央揃えになっています。

注意したいのはflexの子要素にheight: 100%;を指定しても意味がないってことですね。

 

まあ超簡単にいうと、親要素にdisplay: flex;、子要素にdisplay: flex; align-items: center;を指定すればokってことです。

 

まとめ

flex要素はheight: 100%;を指定しても意味ないので100%にしつつ縦に中央揃えが同時にできないわけですが、親要素と子要素で役割を分担すれば今回のようにheight: 100%;っぽくしつつalign-items: center;を当てることができるわけです。

たまに使う時が来るので知っておくといいかもです。

ZennでCSS設計の
本を書きました!

「CSS設計をちょっと勉強したけど
結局よくわからなかった…」
そんな人に読んでほしい一冊です!

読んでみる
スポンサーリンク
CSS
スポンサーリンク
でざなり