Flexbox换行时宽度计算问题及无JS解决方案需求

给flex容器添加width: fit-content属性，即可让容器宽度始终贴合子元素的实际布局宽度，无论是否换行。若需要将flex容器在父容器中居中，给父容器加上text-align: center即可（因为inline-flex属于行内级元素）。

修改后的代码 #

CSS

.parent-container {
  width: 250px;
  text-align: center; /* 实现flex容器的居中 */
}

.flex-container {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 8px;
  background-color: lightpink;
  width: fit-content; /* 核心解决属性 */
}

.flex-item {
  text-align: center;
  width: 96px;
  font-size: 0.8em;
  background-color: lightblue;
}

HTML

<div class="parent-container">
  <div class="flex-container">
      <div class="flex-item">Child 1</div>
      <div class="flex-item">Child 2</div>
  </div>
  
  <div class="flex-container" style="margin-top: 32px">
      <div class="flex-item">Child 1</div>
      <div class="flex-item">Child 2</div>
      <div class="flex-item">Child 3</div>
  </div>
</div>

原理说明 #

inline-flex容器在开启flex-wrap: wrap后，默认会尽可能占据父容器的可用宽度，导致换行后容器被拉满。而fit-content会让容器宽度收缩到刚好容纳所有子元素布局的最小必要宽度，同时不会超出父容器的限制，完美适配子元素数量可变的场景。

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