如何动态打破 FlexBox 列以开始新列答案

【问题标题】：How to dynamically Break FlexBox Column to start a new column如何动态打破 FlexBox 列以开始新列
【发布时间】：2021-02-24 07:54:06
【问题描述】：

我有一个按列放置的动态项目列表（包含文本），我需要在每 5^th 个项目之后打破它。

我只有两个约束：

每个项目的宽度是100px - 如果文本溢出，它必须环绕到下一行。
每列最多只能包含5 项。

项目数量未知已知。如果列表中的项目少于 5 个，则可以将它们保留在同一列中。如果还有更多，那么它们必须换行到下一列。

由于我不知道项目的数量或其内容 - 我无法将 height 属性设置为父 list 容器。

那么如何强制父容器在每 5^th 项进入下一列后中断。

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

【问题讨论】：

问题是 Flexbox 需要定义断点来换行。如果您为项目定义了最大高度，这将是可能的，但由于项目的内容是动态的，因此只有在您拥有可以添加到项目的最大单词数时才会起作用。

标签： html css flexbox css-grid

【解决方案1】：

使用grid的解决方案。

有必要吗？

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

【讨论】：

谢谢！这个解决方案看起来不错，虽然它使用了网格。使用网格的一个小问题是它也会影响其他单元格。就像带有Text 8 的单元格由于包含Long Text 3 must wrap to next line 的相邻单元格而扩展。无论如何，每个单元格只占用所需的空间吗？
使用网格，这可以通过模板规则完成，但如果网格不是动态的。但是你可以用 flex 来做，但是 .list 类应该有一个固定的高度。
这就是问题所在——我不能有一个固定的高度，因为我不知道我将放置在里面的内容。每个项目都必须允许内容包裹 - 从而增加它的高度。这个answer 似乎使用.break 类来解决它。但这是为row 方向完成的。
是的，break 可以做到，但会是动态转移吗？！ :) 我不喜欢 break 类的解决方案。

【解决方案2】：

这是一个使用列的想法。有点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>

【讨论】：

我想用column-fill 做第二个像你这样的解决方案，但我失败了。很好的解决方案。
谢谢！这是最接近要求的方法。