Flexbox布局问题：每行无法正确显示4个元素

问题描述 #

我用HTML和CSS的Flexbox实现布局，目标是每行显示4个元素，但当前代码只能每行显示3个。已经把.element的宽度设为25%（理论上能容纳4个），但实际不符合预期，请问原因是什么？怎么调整CSS实现每行4个元素？

代码示例 #

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  border: 4px solid gray;
}

.element {
  width: 25%;
  height: 300px;
  padding: 8px;
  box-sizing: border-box;
  background-color: silver;
}

<div class="container">
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
  <div class="element"></div>
</div>

问题原因 #

你设置的.element宽度是25%，但容器添加的gap: 8px是额外占据空间的，不会被包含在元素的25%宽度内。4个元素的总宽度是4*25% = 100%，再加上每行4个元素之间的3个间隙（总宽度3*8px=24px），整体宽度就超过了容器的100%，所以第四个元素会被挤到下一行，导致每行只能显示3个。

解决方法 #

这里提供两种实用的调整方案：

方案1：用calc()计算元素宽度 #

把元素的宽度减去每个元素需要分摊的间隙宽度。每行4个元素有3个间隙，每个间隙8px，所以每个元素需要减去(8px * 3) / 4 = 6px。修改.element的宽度：

.element {
  width: calc(25% - 6px);
  height: 300px;
  padding: 8px;
  box-sizing: border-box;
  background-color: silver;
}

这样4个元素的总宽度加上3个间隙的宽度刚好等于容器宽度，就能在一行放下4个元素。

方案2：使用Flex的flex属性（更推荐） #

放弃固定宽度，改用flex属性控制元素的尺寸，结合calc()处理间隙：

.element {
  flex: 0 0 calc(25% - 6px);
  height: 300px;
  padding: 8px;
  box-sizing: border-box;
  background-color: silver;
}

flex: 0 0 [宽度]表示元素不放大、不缩小，基础宽度为计算后的值，这种方式比固定width更适配Flex布局的特性，布局稳定性更好。

注：你的代码中已经正确设置了box-sizing: border-box，所以padding不会额外增加元素宽度，这部分无需调整。

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