如何使用HTML/CSS实现目标Flex项目布局？

问题分析 #

你当前的CSS代码中，flex-wrap: wrap-reverse会反转flex容器的换行方向，这是导致布局和目标效果不符的核心原因；同时未给.item设置宽度，flex项目会根据内容自动调整宽度，无法形成规整的多行布局。

调整方案 #

1. 移除flex-wrap: wrap-reverse，保留正常的换行规则flex-wrap: wrap（或用flex-flow: row wrap明确声明行方向+换行）
2. 给.item设置合适的宽度，根据目标每行的项目数量计算（以每行2个项目为例）

修改后的代码 #

.container {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 3%;
}

/* 计算每行2个项目的宽度：总宽度减去gap后平分 */
.item {
    width: calc((100% - 3%) / 2);
}

/* 让图片填满容器，避免内容尺寸不一致 */
.item img {
    width: 100%;
    height: auto;
}

<div class="container">
      <div class="item">
        <img src="img/1.png">
      </div>
      <div class="item">
        <img src="img/2.png">
      </div>
      <div class="item">
        <img src="img/3.png">
      </div>
</div>

说明 #

• 移除wrap-reverse后，项目会在空间不足时向下换行，符合常规布局逻辑
• 通过calc计算.item宽度，确保加上gap后刚好填满容器宽度，不会出现溢出或多余空白
• 设置图片宽度为100%，保证每个项目内的图片尺寸统一，布局更规整

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