Html 用flexbox填充垂直空间

我第一次使用flexbox，有些项目的高度不同。我试图得到一个长图像所产生的空白，或者可能有很多文本被其他项目填充

下图显示了我想如何移动div：

HTML:

<div id="noises">  
<div class="card text" title=" On a Sunday at 3:24 a.m. ">
    <strong><p> Test title</p></strong>
    <p> test</p>
</div>

<div class="card text" title=" On a Sunday at 3:24 a.m. ">
    <strong><p> title</p></strong>
    <a href="#" target="_blank">
        <img src="https://via.placeholder.com/100x150" style="max-width:-webkit-fill-available;max-width:-moz-available">
    </a>
</div>
<div class="card text" title=" On a Sunday at 3:24 a.m. ">
    <strong><p> title</p></strong>
    <a href="#" target="_blank">
        <img src="https://via.placeholder.com/170x130" style="max-width:-webkit-fill-available;max-width:-moz-available">
    </a>
</div>

<div class="card text" title=" On a Sunday at 3:24 a.m. ">
    <strong><p> Lorem ipsum dolor sit amet</p></strong>
    <p> Lorem ipsum</p>
</div>

<div class="card text" title=" On a Sunday at 3:24 a.m. ">
    <strong><p> title</p></strong>
    <a href="#" target="_blank">
        <img src="https://via.placeholder.com/300x648" style="max-width:-webkit-fill-available;max-width:-moz-available">
    </a>
</div>

<div class="card text" title=" On a Sunday at 3:24 a.m. ">
    <strong><p> Test title</p></strong>
    <p> test</p>
</div>

<div class="card text" title=" On a Sunday at 3:24 a.m. ">
    <strong><p> Test title</p></strong>
    <p> test</p>
</div>

#noises, .noises{
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    height:auto;
    margin:auto;
}
.noise_column{
    flex:30%;
    max-width:30%;
    padding: 0 4px;
}
.noise_column img {
    margin-top: 8px;
    vertical-align: middle;
    max-width:300px;
}
#noises > div, .card{
    min-width: 300px;
    max-width: 300px;
    margin-bottom: 1em;
    padding: 0.5em 0.5em 0.5em 2em;
    margin: 1em;
    border: 2px solid #515151;
    border-radius: 0px 15px 0px 15px;
}
.card, .card > img{
    max-width:300px;
}

代码笔：

---

这应该足够了：

#noises, .noises{
    display:flex;
    // flex-direction:row;  ------>   **flex-direction:column;**
    **max-height: 1500px;**
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    height:auto;
    margin:auto;
}

---

这应该足够了-：

#noises, .noises{
    display:flex;
    // flex-direction:row;  ------>   **flex-direction:column;**
    **max-height: 1500px;**
    flex-wrap:wrap;
    justify-content:center;
    align-items:flex-start;
    height:auto;
    margin:auto;
}

---

这与我想要的东西惊人地相似，缺少一个关键的东西：它不再响应。这与我想要的东西惊人地相似，缺少一个关键的东西：它不再响应