使用flexbox space-between布局时如何让换行元素保持对称居中

实现方案 #

方案1：Flex布局实现 #

如果你想继续用Flex布局，可以通过调整对齐规则+外边距匹配需求：

.container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center; /* 所有行的元素整体居中对齐 */
  row-gap: 10px;
  background: orange;
  margin: 20px -12px; /* 左右负margin抵消子元素边距，实现满行时两侧贴边 */
  padding: 0 12px;
}
/* 子元素加对称左右边距，保证元素间距均匀 */
.container > * {
  margin: 0 12px;
}

如果子元素宽度固定，也可以把column-gap设为计算值，自动匹配满行时space-between的间距效果，不需要手动调整边距：

.container {
  column-gap: calc((100% - 单行列数*单个子元素宽度) / (单行列数 - 1));
}

方案2：Grid布局实现 #

Grid布局可以更精准地满足需求，不需要额外hack适配：

.container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); /* 自动填充列，每列最小宽度和子元素宽度匹配 */
  justify-items: center; /* 每个列格子内的元素居中对齐 */
  column-gap: 20px; /* 自定义列间距 */
  row-gap: 10px;
  background: orange;
  margin: 20px;
}

如果存在宽度特殊的子元素（比如你示例里宽度300px的.weird元素），只需要给特殊元素设置跨列即可：

.weird {
  inline-size: 300px;
  grid-column: span 3; /* 跨3列，和300px宽度匹配 */
}

该方案下满行时元素会自动贴边对齐，和space-between效果完全一致，换行后不足整行的元素会自动在对应列格子里居中，哪怕是单独元素所在的行也会符合对称排布规则。

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