Flexboxで要素の高さをあえて揃えない方法。align-itemsプロパティの使い方。 コーディング

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

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

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

スポンサーリンク

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

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

スポンサーリンク

「align-items」を追加

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

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

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

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

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

スポンサーリンク

まとめ

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

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

「Flexbox」の関連記事