垂直對齊與它們之間具有相等空間的div

Question

所以我努力用CSS實現這個簡單的概念，並且我也搜索了整個互聯網但找不到任何東西。我想我只是不措辭它正確所以我想要做一個視覺形象是這樣的：

頂盒應放置在頂部和底部的一個應該位於底端。然後它們之間的盒子應該在頂部和底部具有相等的間距。這更像是這個答案的垂直版本：https://stackoverflow.com/a/6880421/7150896

Answer 1

您可以使用Flexbox這個。你只需要設置flex-direction: column和justify-content: space-between。

body, 
 
html { 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.content { 
 
    display: flex; 
 
    height: 250px; 
 
    border: 1px solid black; 
 
    justify-content: space-between; 
 
    flex-direction: column; 
 
    width: 200px; 
 
} 
 
.box { 
 
    background: #0479D9; 
 
    height: 50px; 
 
}

<div class="content"> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
    <div class="box"></div> 
 
</div>