做图片展示页面时，产品经理经常提一个看起来很简单的需求：一行放五张图片，放满之后自动换行。用Flex布局来实现这个需求，很多人第一反应就是给容器加上flex-wrap: wrap，结果发现图片行数对了，可每行数量乱七八糟，有时四张有时六张。问题不在Flex布局本身，而在于对换行机制的理解不够到位。本文从原理讲到实现，把每五张换行这件事彻底说清楚。
先弄懂Flex布局的换行原理
Flex布局默认是不换行的。容器的主轴方向上，所有子元素会尽量挤在同一行里，空间不够时子元素会被压缩而不是掉到下一行。这就像一排人站队，走廊再窄大家也会侧着身子挤进去，绝不主动另起一排。
让子元素换行的关键属性是flex-wrap。它有三个可选值：nowrap是默认值，禁止换行；wrap允许换行，一行放不下时多余的项目会按交叉轴方向依次排列到下一行；wrap-reverse同样换行，但行的排列方向相反。对于图片列表，我们通常设置flex-wrap: wrap即可。
但要特别注意，flex-wrap: wrap只负责在“放不下”的时候换行，它不关心一行里有几个元素。也就是说，换行的触发条件是空间不足，而不是数量达标。如果五张图片加起来只有300像素宽，而容器有1000像素，那么第六张、第七张图片依然会挤在同一行。想让每行恰好五张，必须让五个子元素刚好占满一行的宽度，这就要借助宽度计算。
用宽度百分比实现每行固定五张
核心思路是：让每个子元素的宽度等于容器宽度的五分之一，这样第五张图片刚好填满整行，第六张自然被挤到下一行。配合box-sizing: border-box处理边框和内边距，可以避免宽度溢出。
<style>
.pic-list {
display: flex;
flex-wrap: wrap; /* 允许换行 */
width: 100%;
}
.pic-item {
box-sizing: border-box; /* 让padding和border算进宽度 */
width: 20%; /* 100% / 5 = 每项占20% */
padding: 5px; /* 用padding制造图片间距 */
}
.pic-item img {
width: 100%; /* 图片自适应填满item */
height: 200px; /* 固定高度保持整齐 */
object-fit: cover; /* 裁剪填充，避免拉伸变形 */
display: block;
}
</style>
<div class="pic-list">
<div class="pic-item"><img src="a.jpg" alt="图片1"/></div>
<div class="pic-item"><img src="b.jpg" alt="图片2"/></div>
<div class="pic-item"><img src="c.jpg" alt="图片3"/></div>
<div class="pic-item"><img src="d.jpg" alt="图片4"/></div>
<div class="pic-item"><img src="e.jpg" alt="图片5"/></div>
<div class="pic-item"><img src="f.jpg" alt="图片6"/></div>
</div>这个方案里有个细节值得展开。如果直接给img设置20%的宽度，再给img加margin，总宽度就会超过父容器的五分之一，第五张图会被挤下去，变成每行四张。所以更稳妥的做法是外层div负责占位和间距，内层img负责100%填满。这就是为什么很多新手写的代码每行只有四张图的原因：margin没有算进宽度百分比里。
另外，object-fit: cover配合固定高度能保证不同尺寸的图片呈现出统一的视觉效果。原始图片有横有竖，如果只设置width为100%，高度会参差不齐；加上cover之后，浏览器会等比缩放图片并裁掉超出部分，列表立刻整齐很多。
间距处理：gap比margin更省心
间距是实现五列布局时最容易翻车的地方。用margin做间距时，要么用负margin抵消容器两侧多出来的边距，要么用伪类:nth-child(5n)精确控制每行最后一张的右边距归零，代码写起来比较繁琐。
CSS的gap属性是更现代的选择。Flex容器设置gap后，子元素之间的间距会在计算布局时自动扣除，而且首尾元素不会产生多余的外边距。不过要注意，gap会占用可用空间，所以子元素宽度不能直接写20%，需要用calc函数动态计算：
.pic-list {
display: flex;
flex-wrap: wrap;
gap: 10px; /* 每项之间留10像素 */
}
.pic-item {
/* 总宽度 = 5项 + 4个gap，每项宽度 = (100% - 4*10px) / 5 */
width: calc((100% - 40px) / 5);
box-sizing: border-box;
}
.pic-item img {
width: 100%;
height: 180px;
object-fit: cover;
display: block;
}calc表达式中的40px对应四个间距（五张图片之间只有四个间隙，不是五个），除以5得到每一项的实际宽度。这种写法在响应式场景下依然有效，因为百分比部分会随容器宽度实时变化。如果你的项目还需要兼容非常老的浏览器，可以退回padding方案，两者效果一致。
尾部不足五张时的对齐问题
假设总共有13张图片，前两行各五张，第三行只有三张。默认情况下这三张会靠左排列，多数场景这正是期望的效果。但有些设计稿要求尾部图片均匀分布或者居中，这时需要调整容器属性。
想让尾部居中，给容器加justify-content: center即可，但副作用是所有行都会居中，前面的完整行也会跟着变，一般不推荐。更实用的办法是保持默认的flex-start，尾部自然左对齐，视觉上和上面的行对齐，阅读体验反而更好。
还有一种常见诉求：希望占位但不显示，比如尾部空缺的位置显示灰色占位块，让表格感更强。可以在数据渲染完后补足空div：
<div class="pic-list">
<!-- 假设数据循环渲染了13张真实图片 -->
<div class="pic-item"><img src="m.jpg" alt="第13张"/></div>
<!-- 补2个透明占位，凑满15个 --
<div class="pic-item placeholder"></div>
<div class="pic-item placeholder"></div>
</div>
<style>
.pic-item.placeholder {
height: 180px; /* 与图片高度一致 */
background: #f5f5f5; /* 或者干脆设为透明 */
}
</style>占位方案在Vue或React中很容易实现，计算5 - (total % 5)得到需要补充的数量，循环渲染空节点就行。如果余数恰好为0，就不渲染任何占位。
小结与方案选择建议
回顾一下要点：flex-wrap负责允许换行，但每行数量由子元素宽度决定；让每个子元素占容器宽度的五分之一，就能稳定实现每行五张；间距优先用gap配合calc，省去margin抵消的麻烦；尾部不满一行时默认左对齐即可，特殊需求通过占位元素补齐。
如果项目对浏览器兼容性要求不高，也可以考虑CSS Grid布局，用grid-template-columns: repeat(5, 1fr)一行代码就能表达“五列”的语义，比Flex的百分比计算更直观。但在需要行内其他对齐逻辑、或者团队已有Flex规范的场景下，本文的Flex方案依然是首选。理解了宽度与换行的关系之后，改成每行四张、六张也只是改一个数字的事情。