电商网站商品列表每行不足4个时如何始终从左侧开始排列？

• 你大概率给flex布局的商品列表父容器加了justify-content: space-between或justify-content: space-around属性，这类属性会自动分配元素之间的剩余空间，当最后一行元素不足4个时，剩余空间就会把元素撑开，导致错位。
• 也有可能是部分商品项的高度不一致，触发了flex的自动排列错位，这种需要给父容器加align-items: flex-start统一顶部对齐。

第一步：调整父容器flex属性 #

找到你的商品列表父容器对应的CSS选择器（比如.goods-list这类），修改成以下配置：

.goods-list {
  display: flex;
  flex-wrap: wrap;
  /* 不要用space-between/space-around，用flex-start让元素全部左对齐 */
  justify-content: flex-start;
  /* 统一所有商品顶部对齐，避免高度不一致导致的错位 */
  align-items: flex-start;
  /* 如果需要商品之间有间距，用gap属性设置，不要用justify-content分配空间 */
  gap: 15px; /* 横向纵向间距都是15px，也可以用row-gap和column-gap单独设置 */
  box-sizing: border-box;
}

第二步：调整.col-4的宽度计算 #

因为加了gap之后，元素的总宽度会加上gap的宽度，原来的25%宽度就会超出容器，导致每行放不下4个，所以修改.col-4的宽度：

.col-4 {
  /* 按每行4个计算，减去总横向gap的宽度，比如gap是15px，每行4个元素就有3个横向间隙，总间隙是15*3=45px，平均到每个元素就是45/4 px，用calc计算宽度 */
  width: calc(25% - 11.25px);
  box-sizing: border-box;
  margin-bottom: 15px;
}

可选兼容方案（适配不支持gap属性的旧浏览器） #

如果要兼容低版本浏览器，不用gap，改用给商品项加左右内边距、父容器负边距抵消的方案：

.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
  margin: 0 -7.5px; /* 抵消子元素的左右padding */
  box-sizing: border-box;
}
.col-4 {
  width: 25%;
  padding: 0 7.5px; /* 左右各7.5px，总间距15px */
  box-sizing: border-box;
  margin-bottom: 15px; /* 纵向间距 */
}

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