flex-direction为column时，如何让容器内两个div分别居顶和居中？

嘿，我来帮你搞定这个Flexbox布局的需求！你遇到的问题核心是没搞清楚Flexbox主轴和交叉轴的区别，当flex-direction: column时，对齐属性的作用方向会变化，咱们一步步来解决：

问题分析 #

当你给容器设置flex-direction: column时：

• 主轴变成了垂直方向（从上到下），控制主轴对齐的是justify-content
• 交叉轴变成了水平方向（从左到右），控制交叉轴对齐的是align-items

你之前用align-items: flex-start，只会让元素在水平方向左对齐，而不是你想要的垂直顶对齐，这就是问题所在。

实现方案 #

我们可以通过以下两步实现需求：

1. 容器设置justify-content: flex-start（让主轴方向的元素默认顶对齐），同时保留align-items: center（让所有元素水平居中）
2. 给需要垂直居中的第二个div设置margin-top: auto，利用Flexbox的margin自动分配特性，让它在剩余空间里垂直居中

完整代码示例 #

.box {
  display: flex;
  flex-direction: column;
  align-items: center; /* 水平居中所有元素 */
  justify-content: flex-start; /* 主轴（垂直）顶对齐 */
  height: 500px;
  border: 1px solid blue;
}

.box div:first-child {
  width: 100px;
  height: 100px;
  background: red;
  /* 第一个div默认顶对齐，不需要额外样式 */
}

.box div:last-child {
  width: 100px;
  height: 100px;
  background: green;
  margin-top: auto; /* 关键：自动填充上方空间，实现垂直居中 */
}

原理说明 #

当给Flex子元素设置margin: auto时，Flexbox会自动将剩余空间分配给该元素的margin区域。在column布局下，第二个div的margin-top: auto会把第一个div到容器底部的垂直剩余空间，自动分配给它的上方margin，从而让元素自身垂直居中于容器的下半部分，而第一个div则保持顶对齐。

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