トミケルの本音

日々の仕事や趣味で感じたことを綴るブログ

Flex の Tips 2

Flexを使う時、子要素の高さを揃えるのに役に立つ align-items。

特に、

align-items: center;

を使うと子要素は縦中央に並びます。そして、自動的に伸びていた高さも子要素自身の高さになってくれます。

ただ、一方で自動的に伸びてたのが元の高さになるのが困ることも…

そんなときには、その子要素にflexBoxの高さいっぱい(縦に並ばしたときは、幅いっぱい)にできる、align-self。

align-self: strech;

をその子要素に指定して、伸ばしてあげましょう。