CSS Columns, Top to Bottom then Left to Right

问题

I'm building a newspaper style layout for an app. My page is split into 8 columns, and the columns should fill vertically first then horizontally.

If there isn't enough content to fill the page, the columns should still fill vertically first leaving white space to the right of the page. Currently they fill horizontally first leaving white space bellow the content.

I've tried this with CSS columns but it seems to always fill the width of the page, I can't see a way to change this.

I've also tried with flex box, but flex wrap will not break/ wrap inside of a div like CSS columns will.

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

回答1:

Adding column-fill: auto; to .css-col should give you what you are looking for, but you need to add a height to .css-col

回答2:

You seem to be closing the divs too soon. Perhaps inline-flex is closer. I'm not clear what this is supposed to look like otherwise

.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

来源：https://stackoverflow.com/questions/48118266/css-columns-top-to-bottom-then-left-to-right

标签

html

css

layout

flexbox