如何让不同高度的flexbox子元素填满父div并整齐对齐？

想让广告尽量并排显示，换行的时候新行的广告能直接对齐上一行的广告下方（如图所示），但现在的CSS效果不符合预期。

当前使用的CSS代码：

.annonser {
    border: 1px solid white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    gap: 15px;
    padding: 10px;
}

.annons {
    align-items: flex-start;
    width: 245px;
}

• .annonser：父容器div
• .annons：单个广告的子元素

试过谷歌提示的设置align-items:flex-start，不管加在父元素还是子元素上，视觉上子元素仍会对齐所在行最高元素的高度，达不到想要的效果。

补充：使用ASP.NET MVC从数据库自动生成广告，广告内的孙子元素类可忽略。

这是Flex布局的特性导致的——每一行Flex容器的高度由该行内最高的元素决定，哪怕设置了align-items: flex-start，换行后的行依然会保持这个高度，所以看起来广告没对齐到上方元素的正下方。

方案一：改用CSS Grid布局（推荐） #

Grid天生适合这种需要整齐行列对齐的场景，能完美实现“尽量并排+换行对齐”的需求：

.annonser {
    border: 1px solid white;
    display: grid;
    /* 自动生成尽可能多的列，每列最小245px，最大占满可用空间 */
    grid-template-columns: repeat(auto-fill, minmax(245px, 1fr));
    gap: 15px;
    padding: 10px;
}

.annons {
    /* 可选，Grid默认就是顶部对齐，添加后更保险 */
    align-self: start;
}

方案二：调整Flex布局属性 #

如果坚持用Flex，需要同时给父容器和子元素设置顶部对齐，避免子元素被行高拉伸：

.annonser {
    border: 1px solid white;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-evenly;
    align-items: flex-start; /* 父容器设置顶部对齐 */
    gap: 15px;
    padding: 10px;
}

.annons {
    width: 245px;
    align-self: flex-start; /* 子元素强制顶部对齐，防止被拉伸 */
}

简单说明：

• Grid的auto-fill会自动适配容器宽度生成最多列数，换行后广告自然对齐上方元素的正下方，完全匹配需求。
• Flex布局下，必须同时设置父容器的align-items和子元素的align-self为flex-start，才能让子元素摆脱行高的影响，实现顶部对齐。

内容的提问来源于stack exchange，提问作者Ondrew