css - 平衡 block 元素，例如打印中的文本行

Question

我想获得类似于打印中平衡文本行但用于 block 元素的结果。假设在一个 300/100 像素的容器中有一组 50/50 像素的盒子。在容器中 float 盒子将使它们填满一“行”，然后像这样包裹到下一个:

[1][2][3][4][5][6]
[7]

我希望他们以更平衡的方式“包装”:

[1][2][3][4]
[5][6][7]

或者更好的是，让它们在每一列“换行”以填充空间:

[1][3][5][7]
[2][4][6]

我想你可以用 CSS columns 来做到这一点，但感觉就像一个 hack，因为容器元素需要是 float:left 或 display:inline- block 强制列粘在一起，它需要一个约束高度等。我添加了一个片段以供引用。

是否有更真实的 CSS 方法来实现这一点？

.wrap {
  display: inline-block; /*Needs this so make colums stick together*/
  columns: 100px;
  column-gap: 0;
  height: 200px; 
}

.wrap>div {
  width: 98px;
  height: 98px;
  background: red;
  /* styling only */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border: 1px solid blue;
}

<div class="wrap">
  <div>1Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</div>
  <div>2Mauris eu risus.</div>
  <div>3Vestibulum auctor dapibus neque.</div>
  <div>4Consectetuer adipiscing elit.</div>
  <div>5Eu risus.</div>
  <div>6Vestibulum auctor dapibus neque.</div>
  <div>7Lorem ipsum dolor sit amet</div>
  <div>8Aliquam tincidunt mauris eu risus. Lorem ipsum dolor sit amet, consectetur adipisicing elit.</div>
  <div>9Vestibulum auctor dapibus neque.</div>
</div>

Answer 1

这是一个 flexbox 解决方案:在父元素上使用 flex-direction: column 和 flex-wrap: wrap 可以制作元素从上到下换行，并在该列填满后填充另一列。

这是让 flexbox 工作的代码:

  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;

这是一个演示:

.wrap {
  background-color: silver;
  height: 100px;
  width: 400px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  align-content: flex-start;
}
.box { 
  height: 50px;
  width: 50px;
  background-color: red;
  box-sizing: border-box;
  border: 1px solid white;
}

<div class="wrap">
  <div class="box">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
  <div class="box">9</div>
  <div class="box">10</div>
</div>