CSS Flexbox子元素对齐异常、间距不均，如何实现均匀居中？

问题成因 #

你现在的代码里用了justify-content: center，这个属性是把所有子元素当成一个整体往父容器水平中心凑，元素之间的间距全靠各自的margin撑着，不会自动把父容器的剩余空间分给元素之间，自然达不到“均匀分布”的效果。另外，代码没设置垂直方向的对齐规则，子元素在垂直方向也不会居中。

解决方案 #

要实现左侧留空白、元素间均匀分配剩余空间，同时水平垂直都满足需求，可以按下面的步骤调整：

1. 水平方向布局调整 #

根据你的需求，有两种实现方式：

• 方式一：左右都留空白，元素间间距和空白一样大
  把justify-content: center换成justify-content: space-evenly，这个属性会把父容器的剩余空间平均分给子元素的左右两侧和元素之间，刚好符合左侧留空白、元素间均匀分布的要求。

• 方式二：只左侧留空白，元素间均匀分剩余空间，右侧贴父容器边缘
  用justify-content: space-between让元素间自动均分剩余空间，再给父容器加padding-left来预留左侧空白：

  .parent {
    justify-content: space-between;
    padding-left: 20px; /* 空白大小可自定义 */
  }
  

2. 垂直方向居中设置 #

给父容器加上align-items: center，另外得给父容器设个高度（比如min-height），不然垂直居中的效果看不出来：

.parent {
  align-items: center;
  min-height: 200px; /* 高度按需调整 */
}

完整示例代码 #

HTML

<div class="parent">
  <div class="child">box 1</div>
  <div class="child">box 2</div>
  <div class="child">box 3</div>
</div>

方式一完整CSS（左右均留空白）

.parent{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  min-height: 200px;
  border: 1px solid #000; /* 用来查看父容器范围，不需要可删除 */
}

.child{
  margin: 10px;
  padding: 10px;
  background-color: #ccc;
}

方式二完整CSS（仅左侧留空白）

.parent{
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 200px;
  padding-left: 20px;
  border: 1px solid #000; /* 用来查看父容器范围，不需要可删除 */
}

.child{
  margin: 10px;
  padding: 10px;
  background-color: #ccc;
}

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