容器中（而不是作爲一組！）

Question

我已經在我的容器，這通常是身高超過所有這些div S組合得到了一些div小號垂直自動排列多個div。我希望他們平均分配，但不是作爲一個團體。下面的圖片應該解釋我想要做的事情。有什麼辦法來實現使用引導3這個簡單的方法是什麼？

Answer 1

您可以做純CSS，但其實這是如此刻着容易Flexbox的。

.parent { 
    display: flex; 
    flex-direction: column; 
    justify-content: space-around; 
} 

.child { 
    flex: 1 1; 
} 

類似的東西應該工作。

Answer 2

這是一個完美的用例Flexbox的：

.flex-container { 
 
    display: -ms-flexbox; 
 
    display: -webkit-flex; 
 
    display: flex; 
 
    -webkit-flex-direction: column; 
 
    -ms-flex-direction: column; 
 
    flex-direction: column; 
 
    -webkit-flex-wrap: nowrap; 
 
    -ms-flex-wrap: nowrap; 
 
    flex-wrap: nowrap; 
 
    -webkit-justify-content: space-around; 
 
    -ms-flex-pack: distribute; 
 
    justify-content: space-around; 
 
    -webkit-align-content: center; 
 
    -ms-flex-line-pack: center; 
 
    align-content: center; 
 
    -webkit-align-items: center; 
 
    -ms-flex-align: center; 
 
    align-items: center; 
 
} 
 

 
.flex-item:nth-child(1) { 
 
    -webkit-order: 0; 
 
    -ms-flex-order: 0; 
 
    order: 0; 
 
    -webkit-flex: 0 0 auto; 
 
    -ms-flex: 0 0 auto; 
 
    flex: 0 0 auto; 
 
    -webkit-align-self: center; 
 
    -ms-flex-item-align: center; 
 
    align-self: center; 
 
}

<div class="flex-container"> 
 
    <div class="flex-item">Hello</div> 
 
    <div class="flex-item">Hello</div> 
 
    <div class="flex-item">Hello</div> 
 
</div>

Answer 3

您可以使用display: felx爲您的解決方案是這樣的：

.sides{ display:inline-block; margin: 0 10px } 
 
ul { 
 
    display: flex; 
 
    flex-direction: column; 
 
    justify-content: space-between; 
 
    width: 150px; 
 
    padding: 10px; 
 
    margin: 0; 
 
    list-style: none; 
 
    background-color: grey; 
 
} 
 
#side1{ height: 100vh } 
 
#side2{ height: 75vh } 
 
#side3{ height: 50vh } 
 
.box{ 
 
    padding: 2px; 
 
    margin: 0 20%; 
 
    width: 60%; 
 
    box-sizing: border-box; 
 
    background-color: red; 
 
    color: white; 
 
    text-align: center; 
 
}

<div class="sides"> 
 
    <ul id="side1"> 
 
    <li class="box">Line 1</li> 
 
    <li class="box">Line 2</li> 
 
    <li class="box">Line 3</li> 
 
    <li class="box">Line 4</li> 
 
    </ul> 
 
</div><div class="sides"> 
 
    <ul id="side2"> 
 
    <li class="box">Line 1</li> 
 
    <li class="box">Line 2</li> 
 
    <li class="box">Line 3</li> 
 
    <li class="box">Line 4</li> 
 
    </ul> 
 
</div><div class="sides"> 
 
    <ul id="side3"> 
 
    <li class="box">Line 1</li> 
 
    <li class="box">Line 2</li> 
 
    <li class="box">Line 3</li> 
 
    <li class="box">Line 4</li> 
 
    </ul> 
 
</div>