如何在justify-content: start的Flex布局中使用flex-grow，使最后一行子项宽度与上方一致

问题原因 #

你当前给.item设置了flex-grow: 1，该属性的作用是让flex子项平分行内的剩余空间填充整行。前一行有3个子项，剩余空间由3个元素平分，最后一行只有2个子项，剩余空间由2个元素平分，因此出现最后一行元素宽度大于上一行的情况。

方案1：关闭flex-grow，固定子项基础宽度（推荐） #

该方案适配你需要响应式调整的需求，仅需修改flex属性配置即可：

/* 全局统一盒模型，无需额外计算边框、内边距占宽，可选配置 */
* {
  box-sizing: border-box;
}
.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  width: 100%;
}
.item {
  border: 1px solid red;
  /* flex属性依次为 flex-grow:0（不拉伸）、flex-shrink:1（小屏幕可收缩）、flex-basis:33.333%（基础宽度为行宽的1/3） */
  flex: 0 1 33.333%;
  height: 100px;
}

如果需要子项之间添加间距，可在.container中添加gap属性，同时按比例降低flex-basis的数值即可。

方案2：保留flex-grow，添加占位伪元素 #

如果需要保留子项拉伸的特性，可以通过添加高度为0的占位元素填充最后一行的空位实现对齐：

.container {
  display: flex;
  flex-flow: row wrap;
  justify-content: start;
  width: 100%;
}
/* 添加占位伪元素，宽度配置和item完全一致，高度为0不占用可视空间 */
.container::after {
  content: "";
  flex: 1 1 33%;
  height: 0;
  border: none;
}
.item {
  border: 1px solid red;
  flex: 1 1 33%;
  height: 100px;
}

如果你的布局最多支持n个元素一行，添加n-1个同类占位元素即可适配所有最后一行的对齐场景。

可选替代方案：使用CSS Grid实现 #

如果不限制使用Flex布局，CSS Grid天生适配该类等宽网格布局，无需额外处理最后一行对齐问题：

.container {
  display: grid;
  /* 自动填充列，每列最大宽度为1/3行宽，支持响应式调整 */
  grid-template-columns: repeat(auto-fill, minmax(33.333%, 1fr));
  width: 100%;
  box-sizing: border-box;
}
.item {
  border: 1px solid red;
  height: 100px;
}

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