如何用Flexbox实现元素超过3列时自动换行的布局？

不用折腾breaker元素，直接用Flexbox原生属性就能搞定，核心就两步：

• 给你的Flex容器加上flex-wrap: wrap，这是开启自动换行的关键——默认Flex容器是nowrap，不管多少元素都会挤在一行，所以第4个元素不会自动掉下去。
• 控制每个子元素的宽度，确保每行最多放3个。

给你个实际可复用的代码示例：

CSS 部分 #

/* Flex容器样式 */
.grid-container {
  display: flex;
  flex-wrap: wrap; /* 必须加，开启换行 */
  gap: 12px; /* 元素间距，比用margin更省心 */
}

/* 循环生成的子元素样式 */
.grid-item {
  /* 核心：让元素每行最多3个，同时支持自适应 */
  flex: 1 1 calc(33.333% - 12px); 
  /* 可选：设置最小宽度，防止屏幕变窄时元素被挤得太丑 */
  min-width: 220px;
  box-sizing: border-box; /* 避免padding/border撑宽元素 */
  background: #f5f5f5;
  padding: 16px;
}

为什么加breaker元素没用？ #

因为如果容器没开flex-wrap: wrap，哪怕你加个宽度100%的breaker，它也会和其他元素挤在一行，根本起不到换行作用。而且这种硬插breaker的方式非常不灵活，元素数量变了还要调整breaker的位置，完全没必要。

这个方案兼容你已经实现的1个、2个元素的布局：

• 只有1个元素时，它会占满整行
• 2个元素时，各占约50%的宽度（flex:1会平分剩余空间）
• 第3个元素加入后，三个各占约1/3宽度
• 第4个元素自动换行到下一行，和前三个布局保持一致

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