Css Flexbox-如果是1项，则居中对齐；如果是2项，则顶部和底部对齐

有没有一种flexbox方法可以让我实现以下目标

如果flexbox中有一个项目，我希望将其垂直居中

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

如果有两个项目，我希望他们对齐的顶部和底部

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

奖金目标 理想情况下，我意识到这是推动它，如果有3个项目，我想把它们对齐顶部，除了最后一个，它对齐底部

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

---

margin top:auto

在这里是正确的：

.flex{
显示器：flex；
弯曲方向：立柱；
证明内容：中心；
/*用于演示目的*/
边框：1px纯黑；
最小高度：200px；
边缘底部：10px；
}
.flex>div:not（：only child）：类型的最后一个{
页边顶部：自动；
}

一
一
二
一
二
三

如果要将物品垂直居中，请首先为主容器设置以下代码

.flex-container {
        display: -webkit-flex;
        display: -moz-flex;
        display: -ms-flex;
        display: -o-flex;
        display: flex;
        -webkit-flex-direction: row;
        -moz-flex-direction: row;
        -ms-flex-direction: row;
        -o-flex-direction: row;
        flex-direction: row;
        align-items: center;
        height: 400px;
    }

此处，弯曲方向：行；是默认值。您不需要将其添加到主容器中。 您也可以通过以下方式完成此操作

.flex-container {
     display: -webkit-flex;
     display: -moz-flex;
     display: -ms-flex;
     display: -o-flex;
     display: flex;
     height: 400px;
     -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
     justify-content: center;
}

======================================= 如果有两个项目，您希望它们与顶部和底部对齐。 为主容器编写以下代码

 .flex-container {
    display: -webkit-flex;
    display: -moz-flex;
    display: -ms-flex;
    display: -o-flex;
    display: flex;
    height: 400px;
    -webkit-flex-direction: column;
    -moz-flex-direction: column;
    -ms-flex-direction: column;
    -o-flex-direction: column;
    flex-direction: column;
    justify-content: space-between;
 }

注意----对齐内容总是对主轴起作用，而对齐项目则对横轴起作用。

---

希望，这将帮助您解决问题。

这是一些css fu：

div:not（：独生子女）：最后一种类型

@Adam got love flex:DThanks！起初我使用的是空格，但我没有太多的乐趣。但Vucko的答案让我用justify content:center来排序；和margin-top:auto.margin-top:auto不是一个完美的答案，因为当您使用两个以上的项目时。那你怎么办？您也可以通过flex-direction:column；对于container and align self：要放在最后的子级的flex end。我已经测试了我提到的代码。这是可行的……但是@Vucko的答案是：自动；这正是我想要它做的。您可以删除所有带前缀的

display:-webkit flex，因为它们将是无用的，除非您还向其他Flexbox属性添加前缀，例如
-webkit flex direction:column