Flexboxで要素の高さをあえて揃えない方法。align-items:flex-startの使い方

横並びにした要素の高さが自動で揃うのは、Flexboxの利点の1つでもありますが、逆に高さを揃えたくないケースもあると思います。

たった１つのプロパティを追加するだけで解決できるので、そのやり方をご紹介します。

この記事の目次

デフォルトだと高さが揃ってしまう

このように、子要素それぞれの高さが違っているのに、自動で高さが揃ってしまいます。
このままだと困ってしまうケースもありますよね。

.example {
	-webkit-box-align: start;
	-ms-flex-align: start;
	align-items: flex-start;
}

親要素に、「align-items: flex-start;」を追記することで解決します。

値を「flex-end」や「center」にすれば、下端揃えや中央揃えなど、基点を変えて高さを不揃いにできます。
プロパティの種類についてはこちらをご覧ください。

理想通り、高さがバラバラになっています。

逆に、高さを揃えたいのに揃わない場合は下記を参考にしてください。

Flexboxは便利ですがプロパティがたくさんあって複雑なので、あまり理解せずに使っていると、こういった細かい部分で困りがちです。

このように簡単に解決できる場合もあれば、そもそも対応が不可なレイアウトもあるので、プロパティについて詳しく理解しているとコーディングの質も高まると思います。