display: flexで小要素の高さを揃えない方法（コンテンツに合わせる）

display: flexで小要素の高さを揃えない方法

display: flex;はレイアウトを簡単に整えるための強力なCSSプロパティですが、デフォルトの動作では子要素の高さが揃えられてしまうことがあります。子要素の高さをコンテンツに合わせて自由にしたい場合には、align-itemsプロパティを調整する必要があります。

なぜ子要素の高さが揃ってしまうのか？

Flexboxは、親要素がdisplay: flex;を持つ場合、子要素の配置とサイズを自動で調整します。デフォルトではalign-items: stretch;が設定されており、子要素の高さは可能な限り親の高さに合わせて引き伸ばされます。

子要素の高さを揃えない方法

子要素の高さをコンテンツに合わせるには、align-items: start;またはalign-items: flex-start;を使用します。これにより、子要素はコンテンツの高さに応じて配置され、高さが揃うことを防ぎます。

.flex-container {
    display: flex;
    align-items: start; /* 子要素の高さを揃えず、上に揃える */
}

.child {
    padding: 10px;
    border: 1px solid #ccc;
}

その他の方法

他にもalign-items: baseline;を使用することで、子要素のテキストのベースラインに合わせて配置することができます。これも高さを揃えたくない場合に役立つプロパティです。

.flex-container {
    display: flex;
    align-items: baseline; /* 子要素のテキストのベースラインで揃える */
}

使用例と注意点

以下は、さまざまな高さのコンテンツを持つ子要素を持つFlexboxの実装例です。この例では、align-items: start;によって各子要素がそれぞれのコンテンツに基づいて配置されています。

<div class="flex-container">
    <div class="child">短いコンテンツ</div>
    <div class="child">長いコンテンツが含まれる要素です。</div>
    <div class="child">中くらいのコンテンツです。</div>
</div>

これにより、各子要素は自身のコンテンツの高さに合わせて調整されます。

まとめ

Flexboxを使用する際に子要素の高さを揃えたくない場合は、align-items: start;を使用することで、各要素の高さをそれぞれのコンテンツに合わせることができます。align-items: baseline;も場合によっては役立つプロパティで、レイアウトの柔軟性を高めることができます。