如何使用flex实现span元素等宽且宽度不超过最大内容宽度

你要的效果可以通过CSS Grid非常便捷的实现，不需要提前知道span数量，同时满足所有span等宽、容器总宽度刚好适配内容无多余留白的要求：

完整修改后的CSS代码 #

div {
  /* 替换原有的inline-flex属性 */
  display: inline-grid;
  /* 子元素自动按列排列 */
  grid-auto-flow: column;
  /* 所有列宽度均等，自动以最宽的span内容宽度作为统一列宽 */
  grid-auto-columns: 1fr;
  border: 1px solid red;
}

div span {
  border: 1px solid blue;
  /* 可选配置，让span内的内容居中显示 */
  text-align: center;
}

原尝试失败的原因 #

1. 之前使用flex: 1 1 auto时，flex子项的基础宽度为自身内容宽度，天然无法实现等宽；给div添加width: 100%后容器会被强制拉伸到父容器的完整宽度，因此会出现远大于实际需求的空白区域。
2. 给span添加display: inline-block不生效，是因为flex容器的直接子元素会被浏览器自动块级化，inline-block的设置不会生效。

若必须使用Flex实现 #

如果场景限制只能使用Flex布局，也可以通过如下配置实现同等效果：

div {
  display: inline-flex;
  border: 1px solid red;
}

div span {
  flex: 1 1 0;
  /* 强制子项最小宽度不小于自身内容宽度，保证所有子项最终宽度等于最宽内容的宽度 */
  min-width: fit-content;
  border: 1px solid blue;
  text-align: center;
}

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