当flex-basis为百分比时，Flexbox何时开始换行？

Flexbox 的换行触发逻辑很明确：当所有子项的总宽度（包含容器设置的gap）超过容器可用宽度，且容器设置了flex-wrap: wrap时，就会触发换行。但你的场景里因为给子项加了flex-shrink: 1（flex属性的第二个值），子项会先尝试收缩，直到达到自身的最小宽度，之后才会真正换行。

结合你的代码来拆解：

section {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
}

div {
  flex: 1 1 calc(33.33% - 2rem);
  border: 1px solid black;
}

这里flex: 1 1 calc(33.33% - 2rem)对应的三个核心属性是：

• flex-grow: 1：容器有剩余空间时，子项会自动拉伸填满空隙
• flex-shrink: 1：容器空间不足时，子项会自动收缩以适配宽度
• flex-basis: calc(33.33% - 2rem)：子项的初始基准宽度，用来实现“每行3个”的预期布局

你观察到的「文本先换行，子项后换行」的现象，核心原因在于子项的最小宽度默认由内容决定：

1. 屏幕缩小初期，子项的基准宽度calc(33.33% - 2rem)同步变小，但此时宽度还能容纳一行文本，所以文本不换行，子项也不会触发换行；
2. 当基准宽度缩小到无法容纳一行文本时，文本会先换行，此时子项的最小宽度会因为文本换行而进一步降低（比如文本从一行变成两行，盒子可以缩得更窄）；
3. 继续缩小屏幕，子项会通过flex-shrink继续收缩，直到所有子项（加gap）的总宽度还是超过容器宽度，这时候才会触发换行，从每行3个变为每行2个，甚至每行1个。

如果想让子项在文本换行前就触发换行，可以给子项设置固定的min-width，比如：

div {
  flex: 1 1 calc(33.33% - 2rem);
  border: 1px solid black;
  min-width: 250px;
}

这样当子项宽度缩小到250px时，就会直接换行，不会等到文本被迫换行后继续收缩。

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