如何实现内联元素填充父容器全部宽度？动态项数适配方案咨询

刚好之前做项目时遇到过一模一样的问题——静态固定数量子项用百分比确实好使，但子项数量动态变化的话，硬写百分比就完全不适用了。下面几个CSS方案亲测有效，你可以根据自己的场景选：

方案1：Flexbox 布局（最推荐） #

这是我日常开发里用得最多的方案，代码简洁，兼容性覆盖绝大多数现代浏览器，完全不需要JS计算数量。

核心思路是给父容器开启Flex布局，然后给每个子项设置flex: 1，它会让所有子项自动平分父容器的可用宽度：

.parent-container {
  display: flex;
  /* 可选：子项之间加间距 */
  gap: 10px;
}

.child-item {
  flex: 1; /* 关键属性，平分父容器宽度 */
  /* 可选：加样式让效果更明显 */
  border: 1px solid #ddd;
  padding: 12px;
  box-sizing: border-box; /* 避免padding/border撑宽子项 */
}

小提示：如果子项有长文本，记得加word-break: break-all或者overflow: hidden，防止内容溢出导致子项宽度不均。

方案2：Grid 布局（灵活度更高） #

Grid布局的适配能力更强，适合后续可能需要调整布局规则的场景，比如子项需要不同的宽度比例，或者响应式调整列数。

用repeat(auto-fit, minmax(0, 1fr))就能实现动态子项平分宽度：

.parent-container {
  display: grid;
  /* auto-fit自动适配子项数量，1fr表示每列平分空间 */
  grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
  gap: 10px; /* 子项间距 */
}

.child-item {
  border: 1px solid #ddd;
  padding: 12px;
  box-sizing: border-box;
}

这里的minmax(0, 1fr)很重要，它能避免子项内容过长时撑破布局，强制子项保持平分宽度。

方案3：CSS Table 布局（兼容旧浏览器） #

如果你的项目需要兼容IE8及以下这类老旧浏览器，这个方案可以救急，但灵活性不如前两个，非必要不推荐：

.parent-container {
  display: table;
  width: 100%;
  border-collapse: separate;
  border-spacing: 10px; /* 子项间距 */
}

.child-row {
  display: table-row;
}

.child-item {
  display: table-cell;
  border: 1px solid #ddd;
  padding: 12px;
  box-sizing: border-box;
}

总结 #

• 优先选Flexbox：代码简单，兼容性好，满足绝大多数场景；
• 需要更复杂的布局规则选Grid：灵活度更高；
• 兼容旧浏览器选CSS Table：作为兜底方案。

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