如何通过CSS设置换行，使每行包含等量的flex元素？

Flex的flex-wrap: wrap是基于容器宽度和元素尺寸自动换行的，没法原生实现“优先让元素均等分布到多行”的逻辑。针对你6个元素想分成两行各3个的需求，有两种可行方案：

方案一：改用Grid布局（推荐） #

Grid布局天生更适合控制行列分布，能轻松实现你要的均等效果：

#myList {
  display: grid;
  justify-content: center;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
  gap: 10px;
  /* 可选：让容器宽度适配内容，避免过度拉伸 */
  max-width: fit-content;
  margin: 0 auto;
}

• repeat(auto-fit, minmax(100px, 1fr)) 表示每行自动填充元素，每个元素最小宽度100px，剩余空间均匀分配
• 当容器宽度刚好能放下3个元素时，6个元素会自动分成两行各3个；如果容器更宽，会自动增加每行元素数量，依然保持整体分布均衡

方案二：Flex结合媒体查询（保留Flex布局） #

如果必须用Flex，可通过媒体查询手动控制元素基础宽度，强制在特定宽度下每行最多3个元素：

假设每个元素最小宽度是100px，先计算关键阈值：

• 4个元素总宽度：4*100px + 3*10px = 430px（包含gap）
• 3个元素总宽度：3*100px + 2*10px = 320px

然后编写媒体查询：

#myList {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}

#myList > * {
  /* 基础宽度100px，允许伸缩 */
  flex: 1 1 100px;
}

/* 当容器宽度小于430px时，强制每行3个 */
@media (max-width: 430px) {
  #myList > * {
    /* 计算每个元素的基础宽度：(100% - 2个gap) / 3 */
    flex-basis: calc(33.333% - 6.666px);
  }
}

这种方式需要根据元素实际尺寸计算阈值，灵活性不如Grid，但能保留Flex的布局特性。

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