Flex容器动态子项数量下，如何设置子项固定25%宽度以保持4列布局（含空位）

AI 小北

2026-4-30

如何用Flex布局实现固定4列网格（动态子项保留空位）

当然可以仅通过Flex布局实现你的需求！问题出在你当前设置的flex: 1 0 25%上——其中flex-grow: 1会让子项自动拉伸填充行内剩余空间，这就导致了子项宽度不符合预期的情况。

解决方案核心思路

要让每个子项严格保持25%的宽度（同时考虑间距），需要做到两点：

禁止子项拉伸：将flex-grow设为0，这样即使行内有空余空间，子项也不会放大
正确计算子项的基准宽度：因为子项带有margin，需要用calc()调整flex-basis，避免总宽度超出容器导致换行

修改后的代码实现

方案1：保留原有margin的写法

.items {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: #cecece;
  padding: 10px;
  margin: 20px;
  box-sizing: border-box; /* 确保容器padding不影响宽度计算 */
}
.item {
  height: 100%;
  /* flex-grow:0 禁止拉伸，flex-shrink:0 禁止缩小，flex-basis计算后刚好占25%（含margin） */
  flex: 0 0 calc(25% - 8px);
  margin: 4px;
  background: #16B6B6FF;
  box-sizing: border-box; /* 确保item的内边距/边框不影响宽度 */
}

方案2：用gap替代margin（更简洁推荐）

使用Flex容器的gap属性可以省去手动计算margin的麻烦，它会自动在子项之间添加间距，且不会影响子项的宽度计算：

.items {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: wrap;
  background: #cecece;
  padding: 10px;
  margin: 20px;
  gap: 8px; /* 替代item的margin，控制子项间距 */
  box-sizing: border-box;
}
.item {
  height: 100%;
  flex: 0 0 25%; /* 无需计算，直接设25%即可 */
  background: #16B6B6FF;
  box-sizing: border-box;
}