【css】flexboxで横並びにした要素の高さが揃わない！？そんな時の解決法

2018年3月24日

要素の横並びをする際に、floatを使わず実装できて何かと便利なflexboxですが、使い始めの頃横並びにした要素の高さが揃わないという悲しい出来事が起きたので、その際の解決法を備忘録として残して起きます。

結論から言うと、
横並びにしたい要素の親要素にalign-itemsプロパティを使用していませんか！？
align-itemsを指定すると子要素ごとの実際の高さが適用される為、横並びにした要素の高さが揃わないという事象が起きます。

flexboxをちゃんと理解していない僕みたいな初心者にはありがちなミスかと思うので、気をつけて指定しましょうね！

下記に横並びにした要素の高さが揃っているサンプル、要素の高さが揃っていないサンプルを載せておきます。

１、横並びにした要素の高さが揃っているサンプル

See the Pen GxEGJp by hiroy (@hiroya) on CodePen.

スポンサードサーチ

２、横並びにした要素の高さが揃っていないサンプル　※align-items使用

See the Pen BrZVKQ by hiroy (@hiroya) on CodePen.