display:flexで横並びにした子要素の高さが変になってしまった時の対処法

最近携わった案件で使用した、テクニックとして定着していなかった技術について。
これからHTML・CSSを学ぶエンジニアのヒントになればと思います。

もくじ

・よくあるカードを横並びにしたやつ。上辺の基準として揃えたい。
・子要素に当たるカードは body に当たる部分に、全方向 padding 10pxを入れて、borderで囲みたい。
・子要素の高さはそれぞれ異なり、内容は変更される可能であるため、決め打ちではなくheight:autoを使いたい。

親要素をdisplay:flexとし、子要素を横並びにすると、一番長い高さに揃えられてしまった。

See the Pen by ShinEndo (@shinendo) on CodePen.

※上との違いをわかりやすくするためにborderの色をred → blue に変更しています。

See the Pen by ShinEndo (@shinendo) on CodePen.

無事、bodyの全方向に padding 10pxを含んだカードができた。

※flex-direction:rowの場合はy軸方向の配置を。flex-direction:columnの場合はx軸方向の配置を。

flexboxのプロパティであるalign-itemsの初期値はalign-items:stretchである。
align-items:stretchはflexboxの子要素（flexboxアイテム）を伸縮する。

問題が生じた際、align-itemsの初期値がstretchであることを知らなかった。
というのも今まで、flexboxの子要素の高さは決め打ちしているものが多かったためである。
（あるいは、align-items:centerで中央揃えにしていた）

flexboxで複数個の子要素を並べる際は、align-itemsの指定をあらかじめしておくほうが、予期せぬ動きは避けられるだろう。

この機会に、align-items:flex-startを習得したい。