如何让Flex容器在项目换行时扩展至最宽行的宽度？

要解决Flex容器换行后宽度收缩、两侧出现空隙的问题，你可以通过调整容器的布局属性，让容器始终匹配最宽行的宽度：

修改思路 #

• 原容器使用inline-flex会根据当前行最大宽度动态收缩，改为flex并结合width: fit-content，可让容器自动适配所有子项中最宽行的宽度。
• 替换父容器的text-align: center为Flex布局，既能精准实现容器居中，又不会干扰子项的排列逻辑。

修改后的代码 #

<div style="width: 200px; display: flex; justify-content: center;">
  <div id="main">
    <div style="width: 145px; background-color:coral;">1</div>
    <div style="width: 40px; background-color:lightblue;">2</div>
    <div style="width: 70px; background-color:khaki;">3</div>
    <div style="width: 100px; background-color:pink;">4</div>
  </div>
</div>

#main {
  display: flex;
  justify-content: center;
  gap: 16px;
  flex-wrap: wrap;
  border: 1px solid #c3c3c3;
  width: fit-content;
}

#main div {
  height: 50px;
}

原理说明 #

• width: fit-content 让容器宽度自适应内容中最宽的一行，确保容器不会因子项换行而收缩。
• 父容器用display: flex; justify-content: center替代text-align: center，既能实现容器居中，又避免干扰Flex子项的布局逻辑。

如果需要保留容器的行内特性（比如和其他行内元素并排），可以将display: flex改回display: inline-flex并保留width: fit-content，父容器换回text-align: center即可达到同样效果。

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