如何在flex-wrap布局中优先让首行元素占满宽度？

要实现首行/完整行元素优先占满宽度，末行元素保持基础尺寸，用CSS Grid比Flex更易控制，完全适配你的多列场景需求：

核心思路 #

通过grid-template-columns定义固定列数，让每行的元素平分宽度占满整行；当元素数量不足一行时，末行元素保持对应列宽（不会自动拉伸），同时通过CSS变量可灵活配置列数、间隙。

代码示例 #

2列场景（对应你的初始示例） #

/* 定义CSS变量，方便后续调整 */
.grid-container {
  display: grid;
  /* 2列，每列平分容器宽度 */
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}

.grid-container > div {
  background-color: #3b3;
  /* 可选：设置最小宽度，避免列过窄 */
  min-width: 150px;
}

<div class="grid-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

此时前两行（1-2、3-4）的元素会占满整行，第5个元素保持单列宽度，不会拉伸。

3列场景（8个容器） #

只需修改grid-template-columns的值为repeat(3, 1fr)：

.grid-container {
  grid-template-columns: repeat(3, 1fr);
}

前两行各3个元素占满整行，第三行的2个元素保持对应列宽，不会拉伸占满整行。

元素数量为列数整数倍时 #

比如2列4个容器，所有元素会自动平分宽度，尺寸完全一致，符合需求。

如果坚持使用Flex布局，可通过添加伪元素填充末行空位，阻止末行元素拉伸：

核心思路 #

给Flex容器添加与列数相同数量的伪元素，这些伪元素尺寸与真实子元素一致但不可见，填充末行的空缺位置，让真实元素保持原有布局，不会因空位被拉伸。

代码示例 #

/* 定义CSS变量 */
.flex-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  --columns: 2;
  --item-width: calc((100% - (var(--columns) - 1)*10px)/var(--columns));
}

.flex-container > div {
  background-color: #3b3;
  flex: 1 1 var(--item-width);
  min-width: 150px;
}

/* 添加对应列数的伪元素 */
.flex-container::after,
.flex-container::before {
  content: "";
  flex: 0 0 var(--item-width);
  visibility: hidden;
}
/* 3列时需补充第三个伪元素：
.flex-container::nth-child(3)::after {
  content: "";
  flex: 0 0 var(--item-width);
  visibility: hidden;
}
*/

<div class="flex-container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
</div>

该方案需根据列数手动添加对应数量的伪元素，灵活性不如Grid，优先推荐Grid实现。

内容的提问来源于stack exchange，提问作者Friedrich -- Слава</think_never_used_51bce0c785ca2f68081bfa7d91973934>