Flex容器内项目未正确换行且宽度未匹配最宽项的解决方法

问题描述 #

我希望Flex容器内的所有项目宽度一致（与最宽项目的宽度相同），且在空间不足时自动换行。但当前代码无法实现该需求，项目宽度被设置为容器的1/7，而非内容的宽度。

原始代码 #

CSS #

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(255, 0, 0, 0.3);
  max-width: 25rem;
  gap: 1rem;
  padding: 1rem;
}

.flex-item {
  flex: 1 1 auto;
  width: 0;
  box-sizing: border-box;
  background: rgba(0, 0, 255, 0.3);
}

HTML #

<div class='flex-container'>
  <div class='flex-item'>A</div>
  <div class='flex-item'>AB</div>
  <div class='flex-item'>ABC</div>
  <div class='flex-item'>ABCD</div>
  <div class='flex-item'>ABCDE</div>
  <div class='flex-item'>ABCDEF</div>
  <div class='flex-item'>ABCDEFG</div>
</div>

修复方案 #

核心是让Flex项目基于内容宽度计算尺寸，同时保持统一宽度和换行能力：

• 移除.flex-item中的width: 0：这个属性会强制项目忽略内容宽度，按容器比例分配空间
• 修改flex属性为flex: 1 1 min-content：min-content指定项目的基础宽度由自身最宽内容决定；flex:1保证空间足够时，所有项目拉伸到与最宽项目一致的宽度；flex-wrap: wrap则在容器空间不足时触发换行，换行后每行的项目依然会统一为该行最宽项目的宽度
• 可选添加text-align: center优化内容居中的视觉效果

修改后的代码 #

CSS #

.flex-container {
  display: flex;
  flex-wrap: wrap;
  background-color: rgba(255, 0, 0, 0.3);
  max-width: 25rem;
  gap: 1rem;
  padding: 1rem;
}

.flex-item {
  flex: 1 1 min-content;
  box-sizing: border-box;
  background: rgba(0, 0, 255, 0.3);
  text-align: center; /* 可选，让内容居中 */
}

HTML #

<div class='flex-container'>
  <div class='flex-item'>A</div>
  <div class='flex-item'>AB</div>
  <div class='flex-item'>ABC</div>
  <div class='flex-item'>ABCD</div>
  <div class='flex-item'>ABCDE</div>
  <div class='flex-item'>ABCDEF</div>
  <div class='flex-item'>ABCDEFG</div>
</div>

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