我有一个按列放置的动态元素列表(包含文本)，我需要在每 5th 元素之后打破它。
我只有两个约束:
- 每个元素的宽度为
100px- 如果文本溢出，它必须换行到下一行。 - 每列最多必须包含
5个元素。
元素的数量不是未知的。如果列表中的元素少于 5 个，则可以将它们保留在同一列中。
如果有更多，则它们必须换行到下一列。 
因为我不知道元素的数量或它们的内容 - 我无法为父 list 容器设置 height 属性。
那么我如何强制父容器在每 5th 项进入下一列后中断。
.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>最佳答案
这是一个使用列的想法。有点 hacky，因为它需要设置一个很大的高度。
.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>关于html - 如何动态打破 FlexBox 列以开始新列，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/64801733/