使用Flexbox实现每行3个div 避免最后一行元素宽度异常

问题根源 #

你使用的flex: 33%是flex: 1 1 33%的缩写，其中flex-grow: 1属性会让元素在容器有剩余空间时自动拉伸填充，所以当一行不足3个元素时，现有元素会平分剩余宽度，才会出现2个元素各占50%的问题。另外你的响应式规则里没有覆盖.flex-item-center，小屏显示会出现错乱。

修复方案 #

修改flex属性关闭自动拉伸，固定元素宽度为三分之一，同时修正响应式规则即可，修改后的完整CSS如下：

* {
  box-sizing: border-box;
}

.flex-container {
  display: flex;
  flex-wrap: wrap;
  font-size: 30px;
  text-align: center;
  /* 如果需要元素间距可以加gap: 10px; 同时下方元素宽度调整为 calc(33.33% - 6.67px) */
}

.flex-item-left {
  background-color: #f1f1f1;
  padding: 10px;
  flex: 0 0 33.33%; /* 0 0 代表禁止拉伸、禁止压缩，固定宽度为1/3 */
}

.flex-item-center {
  background-color: dodgerblue;
  padding: 10px;
  flex: 0 0 33.33%;
}

.flex-item-right {
  background-color: red;
  padding: 10px;
  flex: 0 0 33.33%;
}

/* 响应式布局修正，覆盖所有flex子项 */
@media (max-width: 800px) {
  .flex-item-right, .flex-item-left, .flex-item-center {
    flex: 0 0 100%;
  }
}

如果需要所有元素自动换行，不需要拆分多个.flex-container容器，把所有子项放在同一个容器下即可自动按每行3个排布。

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