Html 当“弯曲方向”为“柱”时，如何将div与顶部对齐？

我在一个容器中有两个div标签。我想使用flex-box并将第一个div标记与顶部对齐，另一个标记相对于容器居中。我该怎么做

使用

align items:flex start

仅在flex direction为column时将其向左移动。将其移动到顶部的等效css是什么

代码笔：

.box{
显示器：flex；
弯曲方向：立柱；
对齐项目：居中；
证明内容：中心；
高度：500px；
边框：1px纯蓝色；
}
.包厢部{
宽度：100px；
高度：100px；
边框：1px实心暗光；
}
.box分区：第n个子项（1）{
/*如何将第一个div标记推到顶部*/
背景颜色：浅灰色；
}
.box分区：第n个孩子（2）{
背景颜色：浅蓝色；
}

一个
两个

将页边距顶部和底部自动添加到第n个子（2）div。然后添加-50%的Y变换，使其与中心对齐。这假设两个div的高度相同

.box div:nth-child(2){
  background-color: lightblue;
  margin-top: auto;
  margin-bottom: auto;
  transform: translateY(-50%);
}

---

另一个必须居中。水平和垂直居中还是水平居中？另一个是水平和垂直居中。谢谢，这似乎有效。