Flex布局里的图片宽度不一致怎么办？

你这个问题主要是因为图片本身比例不同，直接用flex布局会按原始比例撑开。解决方法很简单，强制让每个图片占一样的宽度，并且高度一致，这样就不会乱了。

直接用这个：

.gallery {

  display: flex;

  flex-wrap: wrap;

  gap: 10px; /* 根据需要调整间距 */

}

.gallery img {

  width: calc(33.33% - 6px); /* 假设一行放三张，减去间距 */

  height: auto; /* 保持图片比例 */

  object-fit: cover; /* 如果需要裁剪可以用这个 */

}

解释一下关键点：
- 图片宽度用 calc 计算，比如一行三张就写 33.33%，再减去间距
- 高度设置为 auto，这样图片比例不会变形
- 如果图片比例差别太大，可以加 object-fit: cover，裁剪成统一的样子

如果你想要固定每行的图片数量，比如4张或者5张，改一下 calc 里的百分比就行，比如 25% 对应4张，20% 对应5张。

就这么干吧，稳得很。

这个问题我之前也踩过坑，搞了半天才发现问题出在哪。图片在Flex布局里默认是根据自身尺寸来撑开的，就算你写了flex:1也没用，因为图片本身不是弹性盒子的子元素，它只是被包裹的内容。

正确的做法是给每个图片外面再包一层容器，让这个容器作为Flex的直接子元素，而不是直接用图片当子元素。这样处理起来就简单了：

<div class="gallery">

  <div class="item"><img src="pic1.jpg" alt=""></div>

  <div class="item"><img src="pic2.jpg" alt=""></div>

  <div class="item"><img src="pic3.jpg" alt=""></div>

</div>

然后CSS这样写：

.gallery {

  display: flex;

  flex-wrap: wrap;

}



.item {

  flex: 1 1 calc(33.333% - 20px); /* 假设你想一行放三个 */

  margin: 10px;

  box-sizing: border-box;

}



.item img {

  width: 100%;

  height: auto;

  display: block;

}

这里有几个关键点：首先给图片加了个父级容器