CSS列，从上到下再从左到右

Question

我正在为一款应用程序构建报纸风格的布局。我的页面分为8列，这些列应该首先垂直填充，然后再水平填充。

如果没有足够的内容来填满页面，那么这些列仍应该首先垂直填充，留下页面右侧的空白。目前它们首先水平填充，留下内容下方的空白。

我已经尝试使用CSS列来实现，但似乎它总是填满页面的宽度，我找不到改变这种情况的方法。

我也尝试过使用flex box，但flex wrap无法像CSS列那样在div内部打破/换行。

.flex-col {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 300px;

  p {
    width: 250px;
  }
}

.css-col {
  columns: 3;
}

点击这里查看我尝试过的例子。

注：此链接为相关IT技术示例。

- James Johnson

Answer 1

将 .css-col 添加 column-fill: auto; 应该可以满足您的需求，但是您需要为 .css-col 添加一个 height。

- Curt Husting

Answer 2

您好，看起来您关闭了 divs 的位置太早了。或许更接近的方式是使用 inline-flex。否则我并不清楚这个应该是什么样子。

.flex-col {
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  max-height: 300px;
}

p {
  width: 250px;
}


}

<div class="flex-col">
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
  <p>The quick brown fox jumped over the small lazy dog. The quick brown fox jumped over the small lazy dog.</p>
</div>

https://codepen.io/Paulie-D/pen/mpBNBg

- Paulie_D