日々の仕事や趣味で感じたことを綴るブログ
Flexを使う時、子要素の高さを揃えるのに役に立つ align-items。
特に、
align-items: center;
を使うと子要素は縦中央に並びます。そして、自動的に伸びていた高さも子要素自身の高さになってくれます。
ただ、一方で自動的に伸びてたのが元の高さになるのが困ることも…
そんなときには、その子要素にflexBoxの高さいっぱい(縦に並ばしたときは、幅いっぱい)にできる、align-self。
align-self: strech;
をその子要素に指定して、伸ばしてあげましょう。