如何在flex列包装布局中启动新列

Question

我希望我的数据按列排列（从上到下，从左到右），数据中的每个标题都应该开始一个新列。有三个限制因素：

• 必须使用flex（我需要使用特定于flex的功能）
• 无法对数据进行分组（例如，将所有数据项包装在一个div中）
• 无法设置固定高度

我的问题是如何在flex-flow: column换行布局中强制列分隔符？

＆＃13;

＆＃13;

.grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.grid .head {
  width: 25%;
  background: orange;
  border-bottom: thin dotted;
}
.grid .data {
  width: 25%;
  background: yellow;
  border-bottom: thin dotted;
}
/* my attempt to solve this */
.grid {
  height: 76px;
}

＆＃13;

<div class="grid">
  <div class="head">Column 1 (3 items)</div>
  <div class="data">item 1-1</div>
  <div class="data">item 1-2</div>
  <div class="data">item 1-3</div>
  <div class="head">Column 2 (4 items)</div>
  <div class="data">item 2-1</div>
  <div class="data">item 2-2</div>
  <div class="data">item 2-3</div>
  <div class="data">item 2-4</div>
  <div class="head">Column 3 (2 items)</div>
  <div class="data">item 3-1</div>
  <div class="data">item 3-2</div>
  <div class="head">Column 4 (1 items)</div>
  <div class="data">item 4-1</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

显然，the correct solution is to use the break-before or break-after property：

  

在CSS2.1的任何地方都会强制中断   page-break-before / page-break-after [CSS21]或CSS3   break-before / break-after [CSS3-BREAK]属性指定了一个   碎片化。

在撰写本文时，大多数浏览器都错误地实现了*-break-*属性，或者根本没有实现它们。提前考虑这个答案。

以下演示适用于：

• FF33

＆＃13;

＆＃13;

.grid {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
}
.grid .head {
  width: 25%;
  background: orange;
  border-bottom: thin dotted;
}
.grid .data {
  width: 25%;
  background: yellow;
  border-bottom: thin dotted;
}
/* force column breaks */
.grid .head:nth-child(n + 2) {
  page-break-before: always; /* FF33 */
}

＆＃13;

<div class="grid">
  <div class="head">Column 1 (3 items)</div>
  <div class="data">item 1-1</div>
  <div class="data">item 1-2</div>
  <div class="data">item 1-3</div>
  <div class="head">Column 2 (4 items)</div>
  <div class="data">item 2-1</div>
  <div class="data">item 2-2</div>
  <div class="data">item 2-3</div>
  <div class="data">item 2-4</div>
  <div class="head">Column 3 (2 items)</div>
  <div class="data">item 3-1</div>
  <div class="data">item 3-2</div>
  <div class="head">Column 4 (1 items)</div>
  <div class="data">item 4-1</div>
</div>

＆＃13;

＆＃13;

＆＃13;

Chromium Version 73.0.3683.75

不尊重专栏：

Answer 2

我认为有一种方法可以使用flexbox，但是，如果我们使用column-count，我们可以利用这些属性：

‘break-before’, ‘break-after’, ‘break-inside’

特别是：

我们可以在每个'head'元素上设置break-before: column;，其中列值表示：

  

始终在生成的框之前强制执行分栏。

（类似地，如果我们在：列之后使用break- ，这将强制在生成的框之后

）

NB：浏览器支持目前为limited to IE（!!）

FIDDLE （仅限IE）

请注意，在IE的上述小提琴中似乎存在定位问题（错误？）所以我将一些代码放在一个特殊的媒体查询中，该查询只影响IE以免影响其他浏览器

Answer 3

如果您可以在每个标题（第一个标题除外）之前动态添加div，则有可能。积分转到Tobias Bjerrome Ahlin。在Chrome，Firefox，Safari和IE11上进行了测试。

.container {
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  height: 200px;
}

.item {
  background-color: #A2CBFA;
  border: 1px solid #4390E1;
  margin: 2px;
}

.break {
  flex-basis: 100%;
}

<div class="container">
  <div class="item">item 1</div>
  <div class="item">item 2</div>
  <div class="break"></div>
  <div class="item">item 3</div>
  <div class="item">item 4</div>
  <div class="item">item 5</div>
  <div class="break"></div>
  <div class="item">item 6</div>
  <div class="break"></div>
  <div class="item">item 7</div>
  <div class="item">item 8</div>
</div>