如何使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>