How to dynamically Break FlexBox Column to start a new column

问题

I have a dynamic list of items (containing text) placed column-wise which I need to break after every 5^th item.

I have only 2 constraints:

Width of each Item is 100px - if the text overflows, it must wrap around to next line.
Each column must contain at-most 5 Items.

The number of items are NOT known. If there are less than 5 items in the list they can be kept in the same column. If there are more then they must wrap to next columns.

Since I do not know the number of items or their content - I cannot set a height property to the parent list container.

So how can I force the parent container to break after every 5^th item into a next column.

.list {
  border: 1px solid black;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}

.item {
  border: 1px solid red;
  width: 100px;
  overflow-wrap: anywhere;
}

.item:nth-child(5n) {
  border: 1px solid blue;
}

<body>
  <div class="list">
    <div class="item">Text 1</div>
    <div class="item">Text 2</div>
    <div class="item">Long Text 3 must wrap to next line</div>
    <div class="item">Text 4</div>
    <div class="item">Text 5</div>
    <div class="item">Text 6</div>
    <div class="item">Text 7 is also long</div>
    <div class="item">Text 8</div>
    <div class="item">Text 9</div>
    <div class="item">Text 10</div>
    <div class="item">Text 11</div>
    <div class="item">Text 12 is last item</div>
  </div>
</body>

回答1:

Here is an idea using columns. A bit hacky because it requires setting a big height.

.list {
  column-width:100px;
  column-fill:auto;  
  column-gap:0;
  height: 100vh; 
}

.item {
  border: 1px solid red;
}

.item:nth-child(5n) {
  border: 1px solid blue;    
  margin-bottom: 100vh; /* to create the break */
}

body {
  margin:0;
}

<body>
  <div class="list">
    <div class="item">Text 1</div>
    <div class="item">Text 2</div>
    <div class="item">Long Text 3 must wrap to next line</div>
    <div class="item">Text 4</div>
    <div class="item">Text 5</div>
    <div class="item">Text 6</div>
    <div class="item">Text 7 is also long</div>
    <div class="item">Text 8</div>
    <div class="item">Text 9</div>
    <div class="item">Text 10</div>
    <div class="item">Text 11</div>
    <div class="item">Text 12 is last item</div>
  </div>
</body>

回答2:

Solution using grid.

It was so necessary?

.list {
  border: 1px solid black;
  display: grid;
  grid-template-rows: repeat(5, auto);
  grid-auto-flow: column;
  justify-content: left;

}

.item {
  border: 1px solid red;
  width: 100px;
  overflow-wrap: anywhere;
}

.item:nth-child(5n) {
  border: 1px solid blue;
}

<body>
  <div class="list">
    <div class="item">Text 1</div>
    <div class="item">Text 2</div>
    <div class="item">Long Text 3 must wrap to next line</div>
    <div class="item">Text 4</div>
    <div class="item">Text 5</div>
    <div class="item">Text 6</div>
    <div class="item">Text 7 is also long</div>
    <div class="item">Text 8</div>
    <div class="item">Text 9</div>
    <div class="item">Text 10</div>
    <div class="item">Text 11</div>
    <div class="item">Text 12 is last item</div>
  </div>
</body>

来源：https://stackoverflow.com/questions/64801733/how-to-dynamically-break-flexbox-column-to-start-a-new-column

标签

html

css

flexbox

css-grid