[css]flexで高さを揃えない方法

たまに使いたいことがある。

こう

<div class="parent">
    <div class="child"><br><br><br><br><br><br><br><br></div>
    <div class="child"><br><br><br><br><br></div>
    <div class="child"><br><br><br></div>
    <div class="child"><br></div>
</div>

.parent{
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 20px;
}
.child{
    flex: 1;
    background: #ddd;
}

「display: flex;」と合わせて「align-items: flex-start;」を書き込むと、子要素の高さがそれぞれの内容物に合ったものになる。