如何让 flexbox 项目占用空白空间？

Question

我正在创建一个网站，我希望将某个页面的内容（即文本内容）显示为两栏。我使用 flexbox 作为内容的容器，其中内容的每个部分的宽度为 50%。问题如下图所示：

我希望 3s div 占据 2s div 下方的 space，而不是留空并破坏页面的外观。

下面是演示案例的简单代码：

#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：link

Answer 1

你不需要为此使用 'flex-box'，float 元素的行为就像你想要的那样。

将 float: left 放在 .d 上，它将填补这个空白。

如果您需要 div 和 4 位于单独的一行，您可以通过 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>

Answer 2

您要找的是 CSS Multi-column Layout. (tut)

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>

如何让 flexbox 项目占用空白空间？

How to make flexbox items take up empty spaces?

css

flexbox

two-columns