如何为单个Flex子项覆盖justify-content属性？Flex布局咨询

好问题！其实Flexbox里并没有像align-self对应align-items那样直接的justify-self属性来覆盖justify-content，不过我们有个非常实用的技巧可以实现你要的效果——利用自动外边距（auto margin）。

为什么这个方法可行？ #

你的容器设置了flex-direction: column，意味着垂直方向是Flex的主轴，justify-content原本是控制所有子项在主轴上的整体分布。而自动外边距（margin-top: auto）的特性是：它会自动吸收容器内剩余的主轴空间，把目标子项“推”到空间的另一端。

实现代码 #

只需要给你的.item-3添加一行样式即可：

.item-1{ background: red; }
.item-2{ background: blue; }
.item-3{ 
  background: yellow; 
  margin-top: auto; /* 关键：用自动外边距把元素推到底部 */
}
.flex_wrapper{ 
  background: #ddd; 
  width: 400px; 
  height: 300px; 
  display: flex; 
  flex-direction: column; 
}

拓展说明 #

如果你的容器是flex-direction: row（水平主轴），想要把某个子项推到右侧，只需要给它设置margin-left: auto就行，原理完全一致。Flexbox的自动外边距是处理单个子项主轴对齐的最灵活方案，比修改justify-content更精准，不会影响其他子项的布局。

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