如何使Flexbox項目佔用空位？

Question

我正在創建一個網站，我希望某些頁面（這是文本內容）的內容顯示爲兩列。我使用flexbox作爲內容的每個部分的寬度爲50%的內容的容器。問題是出在下面的圖片：

我想要的三分格佔用左下方2S格，而不是剩餘空，破壞了頁面的外觀的空間。

下面是一個簡單的代碼演示情況：

#container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.d { 
 
    box-sizing: border-box; 
 
    font-size: 24px; 
 
    width: 50%; 
 
    padding: 25px; 
 
    text-align: justify; 
 
}

<div id="container"> 
 
    <div class="d" id="d1"> 
 
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 
 
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 
 
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 
 
    </div> 
 
    <div class="d" id="d2"> 
 
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 
 
    </div> 
 
    <div class="d" id="d3"> 
 
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 
 
    </div> 
 
    <div class="d" id="d4"> 
 
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 
 
    </div> 
 
</div>

，這裏是如果你喜歡CodePen鏈接：link

Answer 1

你尋找什麼是CSS Multi-column Layout。 （​​）

flex按列或行按行繪製元素列，但不跨越。

在這裏，你將需要：

• 集方向柱

• 設置容器的高度觸發時第一關口充滿包裝到下一列。

grid允許跨越但必須設置。

float也可以像Felix Mosheev所提出的那樣。

#container { 
 
    column-count: 2; 
 
    column-fill:balance 
 
} 
 

 
.d { 
 
    box-sizing: border-box; 
 
    font-size: 24px; 
 
    padding: 25px; 
 
    text-align: justify; 
 
}

<div id="container"> 
 
    <div class="d" id="d1"> 
 
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 
 
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 
 
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 
 
    </div> 
 
    <div class="d" id="d2"> 
 
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 
 
    </div> 
 
    <div class="d" id="d3"> 
 
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 
 
    </div> 
 
    <div class="d" id="d4"> 
 
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 
 
    </div> 
 
</div>

Answer 2

你並不需要使用'彈性框'，float元素的行爲就像你想要的。

把float: left放在.d上，它會填補這個空白。

如果您需要將4的div放在單獨的行中，您可以通過clear: both/left/right來實現。

#container { 
 
} 
 

 
.d { 
 
    box-sizing: border-box; 
 
    font-size: 24px; 
 
    width: 50%; 
 
    padding: 25px; 
 
    float: left; 
 
    text-align: justify; 
 
}

<div id="container"> 
 
    <div class="d" id="d1"> 
 
    1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 
 
    111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 
 
    1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 1111 1111 111 1111 1111 111 111 
 
    </div> 
 
    <div class="d" id="d2"> 
 
    222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 222 22222 222 222 2 2 22 2 22 
 
    </div> 
 
    <div class="d" id="d3"> 
 
    3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 3333 33 3 333 33 333 3333 333 
 
    </div> 
 
    <div class="d" id="d4"> 
 
    444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 444 4 4 4 4 4444 4444 4444 44 
 
    </div> 
 
</div>