【CSS】display:flexで高さをそろえない方法

【現象】高さがそろってしまう

display:flexは子要素を横並べすることができるCSSです。

ただし、これを指定しただけでは子要素が親要素と同じ高さになってしまいます。

下記は左が4行分の高さになっており、右もその高さにそろってしまっている例です。

<style>
.example{
    display: flex;
    border: 1px solid #333;
    background: #cfeafa;
}
.example>div{
    padding: 10px;
    margin: 10px;
    width: 50%;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example">
    <div>左<br>左<br>左<br>左<br></div>
    <div>右</div>
</div>

子要素の高さをそろえない、それぞれの高さにする方法を解説します。

【解決】align-items:flex-start

子要素の高さをそろえないためにはdisplay:flexを指定している要素に「align-items:flex-start」を追加します。

<style>
.example2{
    /*コレ*/align-items: flex-start;
    display: flex;
    border: 1px solid #333;
    background: #cfeafa;
}
.example2>div{
    padding: 10px;
    margin: 10px;
    width: 50%;
    border: 1px solid #333;
    background: #FFF;
}
</style>
<div class="example2">
    <div>左<br>左<br>左<br>左<br></div>
    <div>右</div>
</div>

align-itemsはdisplay:flexとともに使い、子要素の縦方向の位置を調整するCSSです。

初期値は「align-items:normal」であり、これは「align-items:stretch」と基本的に同じ効果となります。

「align-items:stretch」は子要素の高さを親要素にそろえるものです。

つまり何も指定しない状態では子要素の高さが親要素にそろってしまいます。

「align-items:flex-start」は子要素を始めの位置（上）にそろえるものです。「stretch」が上書きされ解除されることで高さがそろわなくなります。

align-itemsについて詳しくはこちら↓

【まとめ】flexで高さをそろえない方法

display:flexを指定している要素に「align-items:flex-start」を追加する。

以上、flexで高さをそろえない方法でした。