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

Question

我希望我的数据按列排列(从上到下,从左到右),数据中的每个标题都应该开始一个新列.有三个限制:

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

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

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

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

Answer 1

显然,正确的解决方案是使用break-before或break-after属性:

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

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

以下演示适用于:

• FF33

.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 */
}

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

Answer 2

我不认为有办法用 flexbox 做到这一点，但是，如果我们使用column-count我们可以利用以下属性：

'突破之前'，'突破之后'，'突破内部'

特别是：

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

始终在生成的框之前强制分列。

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

注意：浏览器支持目前仅限于 IE (!!)

.grid {
    columns: 4;
    column-gap: 0;
}

.grid > div {
  background: lightyellow;
  border-bottom: thin dotted;
}

.grid .head {
  background: gold;
  border-bottom: thin dotted;
  break-before: column; /*   this is the vital rule  */
}

@media screen and (min-width:0\0) { 
    .grid {
        position: relative;
        left:-20vw;
        /* Probably because IE wants to add a column before the first head class?? 
        Interestingly enough though, the following selector does not work:
        .data + .head { break-before: column; } */
   }
}

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

——

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