フレックスエレメートチャイルドの1つを垂直に整列する方法

Question

フレックスコンテナの中に3つの垂直方向のdivをflex-direction:columnとし、3番目のdivをコンテナの下部に配置する必要があります。

これは私が何をしたいの説明です：https://jsfiddle.net/tom8p7be/

は、どのように私はこれを行うことができますか？ありがとうございました。

Answer 1

最初の子divと最後の子divの両方にmargin-top: autoを追加できます。 last-child divにmargin-top: autoを追加すると、そのdivを親の最後にプッシュしますが、他の2つのdivも親の上にプッシュします。そのため、最初の子divにmargin-top: autoを追加する必要があります。これにより、スペースの中心に、先頭から最後の子divに配置されます。

.container { 
 
    display: flex; 
 
    flex-direction: column; 
 
    align-items: center; 
 
    justify-content: center; 
 
    min-height: 100vh; 
 
} 
 
.container div { 
 
    margin: 5px; 
 
    padding: 5px 10px; 
 
    border: 1px solid; 
 
} 
 
.container > div:last-child, 
 
.container > div:first-child{ 
 
    margin-top: auto; 
 
}

<div class="container"> 
 
    <div>This div should be vertically centered</div> 
 
    <div>This one too</div> 
 
    <div>And this div shoud be placed at the bottom of the flex container</div> 
 
</div>