在flexbox的頂部居中和底部居中對齊flex子對象

Question

我需要一個使用flexbox的布局，其中2個flex-item，item-1應該在頂部居中對齊，而item-2應該在底部居中對齊。 我不知道該怎么做。

請參見以下代碼：

 .container{ padding:10px; background: #fff; border-radius:5px; margin: 45px auto; box-shadow: 0 1.5px 0 0 rgba(0,0,0,0,1.1); } .item{ color: #fff; padding: 15px; margin: 5px; background: #3db5da; border-radius: 3px; } .container{ display: flex; min-height: 50vh; justify-content: center; align-items: center; flex-direction: column; } .item{ /*margin: auto;*/ /*align-self: flex-start;*/ } .item-4{ align-self: flex-start; } 

 <div class="container"> <div class="item item-4"> Flex Item <p>Vertical and horizontal align easy!</p> </div> <div class="item item-5"> bottom-center</div> </div> 

這是小提琴鏈接： https : //jsfiddle.net/q5cw4xvy/

Answer 1

你的意思是這樣嗎？ https://jsfiddle.net/da4jdff7/1/

.container{
display: flex;
min-height: 50vh;
align-items: center;
flex-direction: column;
}

.item-5 {
margin-top: auto
}

Answer 2

您正在尋找的是justify-content: space-between; 對齊項目，直到角落。 將其添加到.container然后就可以了。

.container{
    /*justify-content: center;*/
    justify-content: space-between;
}

在.item-4您具有align-self: flex-start; 但您不需要。 只需將其刪除。

https://jsfiddle.net/q5cw4xvy/2/

為了更好地幫助您了解flexbox，有一篇非常不錯的css-tricks文章 。