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;
を当てることができるわけです。
たまに使う時が来るので知っておくといいかもです。