Flex容器内元素对齐问题：如何调整.two元素实现精确对齐？

看起来你想在已经设置了justify-content: space-between的Flex容器里，精确控制中间元素.two的位置对吧？我给你几个实用的方案，根据你的需求选就行：

方案1：让.two精确水平居中（最常用） #

这个方法不管容器宽度怎么变，.two都会保持在水平正中间，同时.one和.three依然固定在左右两端：

修改CSS如下：

.cont { 
  display: flex; 
  justify-content: space-between; 
  height: 100px; 
  background: #eee;
  position: relative; /* 添加相对定位，作为.two绝对定位的参照 */
}
.two { 
  background: #090; 
  position: absolute;
  left: 50%; /* 先让元素左边缘对齐容器中点 */
  transform: translateX(-50%); /* 再向左移动自身宽度的一半，实现完全居中 */
}

方案2：让.two对齐到固定位置 #

如果你需要把.two放到一个固定的像素/百分比位置（比如距离左侧200px），直接用绝对定位就能搞定：

.two {
  background: #090;
  position: absolute;
  left: 200px; /* 这里设置你需要的精确位置，也可以用百分比比如left: 30% */
}

方案3：不使用绝对定位，保持Flex布局流 #

如果你不想破坏Flex的布局流，也可以调整容器的justify-content，结合margin来控制位置：

.cont { 
  display: flex; 
  justify-content: flex-start; /* 改为左对齐 */
  height: 100px; 
  background: #eee;
}
.one { background: #009; margin-right: auto; } /* 让.one靠左，右侧自动填充空间 */
.three { background: #900; margin-left: auto; } /* 让.three靠右，左侧自动填充空间 */
.two { 
  background: #090; 
  margin-left: 60px; /* 这里设置.two距离.one右侧的精确距离 */
}

你可以根据自己的实际需求选择对应的方案，要是还有更具体的对齐要求，随时调整参数就行~

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