嘿，这个问题我之前也踩过坑！你想要的是让6个固定尺寸的元素在容器缩小时整组换行，而不是单个元素“掉队”变成5+1的尴尬布局，对吧？默认的Flexbox行为会让元素自动缩小来挤入容器，这就是问题的根源。

核心解决方案：禁止元素缩小 #

只要给子元素加上flex-shrink: 0，就能阻止它们被压缩，强制保持固定宽度。这样Flexbox会在容器宽度不足以放下整行元素时，直接切换到下一行的数量组合，完美实现你要的「1行6列→2行3列→3行2列→6行1列」的效果。

完整代码示例 #

CSS

.box {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 可选：让每行元素居中，视觉更美观 */
  gap: 5px; /* 用gap代替margin，避免外边距重叠问题 */
}

.box div {
  background-color: yellow;
  width: 50px;
  height: 50px;
  flex-shrink: 0; /* 关键：禁止元素缩小，保持固定尺寸 */
}

HTML

<div class="box">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
  <div>Four</div>
  <div>Five</div>
  <div>Six</div>
</div>

自动换行规则说明 #

设置后，容器宽度变化时会自动触发以下布局：

• ≥325px：1行6列（6个元素宽度+5个间隙：50*6 +5*5=325）
• 160px ~ 324px：2行3列（3个元素宽度+2个间隙：50*3 +5*2=160）
• 105px ~ 159px：3行2列（2个元素宽度+1个间隙：50*2 +5=105）
• <105px：6行1列

如果需要更精准的断点控制（比如调整间隙大小或对齐方式），可以结合媒体查询进一步定制，但flex-shrink:0已经解决了最核心的“单个元素换行”问题。

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