css - Flexbox - 如果有 1 个元素居中对齐，如果有 2 个元素则顶部和底部对齐

Question

是否有一种 flexbox 方法可以实现以下目标？

如果 flexbox 中有一项，我想将其垂直居中。

 -------------------
|                   |
|                   |
|one item only      |
|                   |
|                   |
 -------------------

如果有 2 个元素，我希望它们与顶部和底部对齐。

 -------------------
|first item         |
|                   |
|                   |
|second item        |
 -------------------

奖金目标

理想情况下，我意识到这是在插入它，如果有 3 个元素我想将它们对齐到顶部，除了最后一个，它与底部对齐。

 -------------------
|first item         |
|second item        | 
|                   |
|                   | 
|third item         |
 -------------------

Answer 1

margin-top: auto 在这里是正确的:

.flex {
  display: flex;
  flex-direction: column;
  justify-content: center;

  /* for demonstration purposes */
  border: 1px solid black;
  min-height: 200px;
  margin-bottom: 10px;
}

.flex > div:not(:only-child):last-of-type {
  margin-top: auto;
}

<div class="flex">
  <div>one</div>
</div>

<div class="flex">
  <div>one</div>
  <div>two</div>
</div>

<div class="flex">
  <div>one</div>
  <div>two</div>
  <div>three</div>
</div>