当弹性方向是列时，如何将DIV对齐到顶部

Question

我在一个容器中有两个DIV标签。我想使用Flex框并将第一个DIV标签对齐到顶部，而另一个则相对于容器。我该怎么做？

使用align-items: flex-start仅在flex方向为列时将其移至左侧。将其移至顶部的等效CSS是什么？

codepen：https：//codepen.io/gmsg68/pen/agpopg

.box {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 500px;
  border: 1px solid blue;
}
.box div {
  width: 100px;
  height: 100px;
  border: 1px solid darkgray;
}
.box div:nth-child(1) {
  /*  How do I push the first div tag to the top? */
  background-color: lightgray;
}
.box div:nth-child(2) {
  background-color: lightblue;
}

<div class="box">
  <div>One</div>
  <div>Two</div>
</div>

Answer 1

将保证金顶部和底部自动添加到nth-child(2(div。然后添加-50％的Y变换以使其对齐中心。假设两个div是相同的高度。

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