在頂部中心和底部中心對齊柔性孩子，柔性箱

Question

我需要使用柔性箱佈局，其中2個柔性項目，項目1應該在頂部中心對齊，而項目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

你在找什麼是justify-content: space-between;對準的項目，直到角落。 加入到.container，你去了。

​​

在.item-4你有align-self: flex-start;但你並不需要這一點。只是刪除它。

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

爲了更好地幫助您瞭解Flexbox的，有一個非常好的css-tricks article。

Answer 2

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

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

.item-5 { 
margin-top: auto 
}