Question

我正在为应用构建报纸样式布局。我的页面分为8列，列应首先垂直填充，然后水平填充。

如果内容不足以填充页面，则列仍应垂直填充，并在页面右侧留下空白区域。目前，他们首先水平填充，在内容之外留下空白区域。

我已经尝试过使用CSS列，但似乎总是填充页面的宽度，我看不到改变它的方法。

我也尝试过使用flex box，但是flex包装不会像CSS列那样破坏/包装在div里面。

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

  p {
    width: 250px;
  }
}

.css-col {
  columns: 3;
}

See here for an example of what I have tried.

Answer 1

将column-fill: auto;添加到.css-col可以为您提供所需内容，但需要height添加.css-col

Answer 2

你似乎太快关闭了div。或许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

CSS列，从上到下然后从左到右

2 个答案: