如何让flexbox项占用空格？

Question

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

我希望3s div占用2s div下面的空格，而不是保持空白并破坏页面的外观。

这是一个演示案例的简单代码：

#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

您不需要使用＆＃39; flex-box＆＃39;为此，float元素的行为就像你想要的那样。

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

如果您需要将4的div放在一个单独的行中，您可以通过clear: both / left / right实现该目标。

＆＃13;

＆＃13;

#container {
}

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

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

你要找的是CSS Multi-column Layout。 （tut）

flex按行或按行绘制元素列，而不跨越。

这里你需要：

• 将方向设置为列

• 设置容器的高度，以便在填充第一列时触发包装到下一列。

grid允许跨越，但必须设置。

{p> 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>