如何实现多行Flex布局元素宽度一致且上下行div精准对齐？

原代码使用flex-wrap: wrap + justify-content: space-evenly导致换行后元素错位、宽度不一致，核心问题在于：

• 每行元素数量不同时，space-evenly会给每行分配不同的空白间距，导致元素位置错位
• 子元素宽度由内容自适应，没有强制统一宽度

下面给出两种可行的实现方案：

方案一：Flex布局优化（无需替换现有布局） #

修改CSS，通过弹性属性强制子元素等宽并对齐：

.my_flexx {
  display: flex;
  background-color: green;
  flex-wrap: wrap;
  width: 600px;
}

.my_flexx div {
  background-color: deepskyblue;
  margin: 8px;
  padding: 6px;
  font-size: 14px;
  /* 核心：按4列布局设置弹性属性，可根据需求调整比例 */
  flex: 1 1 calc(25% - 16px);
  /* 可选：防止长内容溢出 */
  word-break: break-all;
}

原理： #

• flex: 1 1 calc(25% - 16px) 是flex-grow:1、flex-shrink:1、flex-basis:calc(25% - 16px)的简写：
  • flex-basis：设置元素基础宽度为父容器的25%减去左右margin总和（8px×2=16px），保证4列布局不溢出
  • flex-grow:1：父容器有剩余空间时，所有子元素均分空间，保持每行宽度一致
  • flex-shrink:1：容器变窄时，元素等比例缩小，避免溢出
• 去掉justify-content: space-evenly，子元素宽度由flex属性控制，无需额外分配空白间距

方案二：Grid布局（更简洁的网格对齐） #

直接替换为Grid布局，天生支持跨行等宽对齐：

.my_flexx {
  display: grid;
  background-color: green;
  /* 自动填充列，最小宽度150px，超过后自动扩展 */
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  /* 设置元素间距，替代子元素margin */
  gap: 16px;
  padding: 8px;
  width: 600px;
}

.my_flexx div {
  background-color: deepskyblue;
  padding: 6px;
  font-size: 14px;
}

原理： #

• grid-template-columns: repeat(auto-fill, minmax(150px, 1fr))：
  • auto-fill：根据容器宽度自动填充尽可能多的列
  • minmax(150px, 1fr)：每列最小宽度150px，最大占满剩余空间（1fr代表均分剩余空间）
• gap:16px：统一设置网格元素间距，替代子元素margin，布局更简洁
• Grid布局的每行列宽完全统一，天然实现跨行对齐，无需额外处理

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