display:flexで横並びにした子要素の高さが変になってしまった時の対処法
最近携わった案件で使用した、テクニックとして定着していなかった技術について。
これからHTML・CSSを学ぶエンジニアのヒントになればと思います。
もくじ
1. どういう問題が起きたか。
2. 問題に対する対処法。
3. align-itemsについて。
4. まとめ
1. どういう問題が起きたか。
・よくあるカードを横並びにしたやつ。上辺の基準として揃えたい。
・子要素に当たるカードは body に当たる部分に、全方向 padding 10pxを入れて、borderで囲みたい。
・子要素の高さはそれぞれ異なり、内容は変更される可能であるため、決め打ちではなくheight:autoを使いたい。
以上の条件を踏まえて、
親要素をdisplay:flexとし、子要素を横並びにすると、一番長い高さに揃えられてしまった。
See the Pen by ShinEndo (@shinendo) on CodePen.
2. 問題に対する対処法。
display:flexを指定した要素に「align-items:flex-start」を追加。
※上との違いをわかりやすくするためにborderの色をred → blue に変更しています。
See the Pen by ShinEndo (@shinendo) on CodePen.
無事、bodyの全方向に padding 10pxを含んだカードができた。
3. align-itemsについて。
align-itemsは「flexboxの交差軸に対しての子要素の配置を決める」
※flex-direction:rowの場合はy軸方向の配置を。flex-direction:columnの場合はx軸方向の配置を。
flexboxのプロパティであるalign-itemsの初期値はalign-items:stretchである。
align-items:stretchはflexboxの子要素（flexboxアイテム）を伸縮する。
4. まとめ
問題が生じた際、align-itemsの初期値がstretchであることを知らなかった。
というのも今まで、flexboxの子要素の高さは決め打ちしているものが多かったためである。
（あるいは、align-items:centerで中央揃えにしていた）
flexboxで複数個の子要素を並べる際は、align-itemsの指定をあらかじめしておくほうが、予期せぬ動きは避けられるだろう。
この機会に、align-items:flex-startを習得したい。