如何用CSS Flexbox实现无间隙双列自适应高度图片画廊？

我来帮你搞定这个Flexbox图片画廊的需求！你想要每行固定显示2张图、消除所有间隙，同时页面高度不固定支持滚动和新增图片，其实不用纠结flex-direction: column（毕竟没固定高度确实没法自动换列），用row方向配合几个关键属性就能完美实现，比硬编码margin的方法更灵活易维护。

核心思路 #

问题的根源其实有两个：一是图片作为行内元素自带的基线间隙，二是Flex布局中默认的flex属性可能让元素宽度变化，或者容器/元素自带的padding/margin导致间隙。我们只需要针对性调整就能解决：

具体实现代码 #

首先是容器的样式：

.gallery {
  display: flex;
  flex-wrap: wrap; /* 让元素在一行放不下时自动换行 */
  padding: 0; /* 清除容器默认内边距 */
  margin: 0; /* 清除容器默认外边距 */
  list-style: none; /* 如果用ul/ol做容器，去掉列表符号 */
}

然后是图片的样式：

.gallery img {
  flex: 0 0 50%; /* 固定宽度为50%，不拉伸、不收缩 */
  width: 50%; /* 兼容部分不支持flex属性的旧浏览器 */
  display: block; /* 将图片转为块级元素，消除行内元素的基线间隙 */
  box-sizing: border-box; /* 确保边框/内边距不会突破50%的宽度 */
  /* 可选：如果需要保持图片比例不变，避免拉伸变形 */
  object-fit: cover;
  height: auto;
}

为什么这个方案有效？ #

• flex-wrap: wrap 是关键：它让图片在容器宽度不够（每张占50%，一行最多放2张）时自动换行，完美适配“每行2张”的需求，新增图片也会自动排到下一行，不用手动调整。
• flex: 0 0 50% 锁定了图片的宽度，不管容器怎么变化，每张图都严格占50%，不会出现拉伸或压缩的情况。
• display: block 解决了很多人忽略的细节：图片默认是行内替换元素，会和基线对齐产生微小的底部间隙，转为块级元素就能彻底消除这个间隙。
• box-sizing: border-box 是保险项：如果后续你想给图片加边框或内边距，不会让图片宽度超过50%导致换行异常，宽度计算更可控。

额外优化（可选） #

如果你的图片高度不一致，想要每行的图片高度自动对齐，可以给容器加上align-items: stretch（这其实是Flex容器的默认值，所以不用额外写），图片会自动拉伸到同一行的最大高度；如果想保持图片比例不变，就用object-fit: cover（如上面代码所示），它会裁剪图片的多余部分来填充容器，同时保持比例。

这个方案完全适配你“页面高度不固定、支持滚动、新增图片自动排版”的需求，而且比硬编码margin的方式更健壮，不会因为后续修改布局而出现问题。

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