如何用CSS实现每行最多3个、宽度一致的5个Flex元素？

一、Flex布局改进方案 #

你之前的问题出在flex:1包含了flex-grow:1，最后一行剩余空间会被元素瓜分导致宽度拉伸。调整成固定宽度计算即可：

1. 容器样式：

.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px; /* 元素间的间距，可按需调整 */
}

2. 子元素样式：

.flex-item {
  flex: 0 0 calc((100% - 2 * 10px) / 3); 
  /* 计算逻辑：容器总宽度减去2个间距（3个元素有2个间隙），再平分3份 */
  /* flex:0 0 宽度 表示元素不放大、不缩小，固定占比宽度 */
}

这样不管元素数量多少，每行最多3个，所有元素宽度完全一致，最后一行的元素也不会被拉伸。

二、Grid布局（更推荐的通用方案） #

Grid天生适合这种行列对齐的场景，代码更简洁，适配动态数量元素更省心：

1. 容器样式：

.grid-container {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(calc((100% - 2 * 10px)/3), 1fr));
  gap: 10px; /* 元素间的间距，可按需调整 */
}

2. 子元素无需额外设置宽度，Grid会自动分配：

.grid-item {
  /* 只需处理内部样式，高度动态完全不影响布局 */
}

逻辑说明： #

• repeat(auto-fill, ...)：自动根据容器宽度填充尽可能多的列，保证每行最多3个元素
• minmax(calc(...), 1fr)：设置列的最小宽度（计算方式和Flex一致），1fr让所有列宽度均等分配，确保所有元素宽度一致
• 不管元素数量是2、5还是N个，最后一行的元素宽度都会和其他行保持一致，不会拉伸

补充：响应式适配 #

如果需要在不同屏幕尺寸调整每行显示数量，比如小屏幕每行2个，只需修改minmax里的计算值：

@media (max-width: 768px) {
  .grid-container {
    grid-template-columns: repeat(auto-fill, minmax(calc((100% - 1 * 10px)/2), 1fr));
  }
}

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