css - Flexbox - 第二行垂直居中

Question

我想将第二行放在容器的中心，但我不知道该怎么做。 align-self 仅在水平方向上有效 - 即使 flex-direction 设置为“column”。

.first, .second {
  height: 50px;
  width: 100%;
}

.first {
  background-color: wheat;
}

.second {
  align-self: center;
  background-color: purple;
}

.container {
  background-color: silver;
  height: 300px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

<div class="container">
  <div class="first">
    first
  </div>
  <div class="second">
    second
  </div>
</div>

Answer 1

很难看出实际发生了什么，因为 .first 和 .second 的宽度设置为 100%。如果将它们设为 50x50 正方形，您可以看到 align-self 在父容器的横轴上工作，因此在本例中它使 .second 水平居中。

一个可行的解决方案是在 .second 中嵌套另一个 flexbox，如下所示:https://jsfiddle.net/Lygdk4xo/