CSS flex换行布局中如何让不等高元素向上对齐消除间隙

你设置align-items: flex-start不生效是Flex换行布局的固有特性：Flex开启换行后，子元素会按行分组排列，每一行的高度由该行内最高的子元素决定。同一行里高度更矮的元素，只会在当前行的高度范围内靠上对齐，无法自动填补上一行矮元素下方的空白，所以会出现你看到的元素下方留空、没有向上贴紧的效果。

直接替换原有容器和子项的CSS样式即可，用CSS原生多列布局实现你要的错落贴紧效果，改动量最小：

.container{
    width: 1200px;
    margin: 50px auto;
    background-color: aquamarine;
    /* 移除原有flex相关属性，换成多列布局配置 */
    column-count: 3; /* 固定显示3列，和你之前3个一排的效果一致 */
    column-gap: 22px; /* 列之间的间距，可自行调整数值 */
}
.container__item{
    width: 100%; /* 移除原固定350px宽度，自适应列宽 */
    background-color: #fff;
    break-inside: avoid; /* 核心属性：禁止卡片被拆分截断到两列 */
    margin-bottom: 20px; /* 控制卡片上下方向的间距 */
}
[class*="image"]{
    width: 100%; /* 图片宽度适配列宽，移除原固定350px */
    background-color: rgb(200, 200, 200);
    color: gray;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}

其余你写的h2、p、不同高度的样式规则可以完全保留不用改。

你当前HTML里写的类名比如350x150、350x100不符合CSS规范：CSS类名不能以数字开头，虽然你现在用后缀匹配的属性选择器可以命中样式，但可能在部分场景下出现兼容问题，建议改成h-150、h-100这类以字母开头的类名。

如果一定要保留Flex布局实现这个效果，需要额外引入JS动态计算每个卡片的偏移位置，纯CSS的Flex换行无法实现这种错落贴紧的瀑布流效果，练习阶段不推荐用这种复杂方案。

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