强制 Flexbox 在特定项目之后换行（方向：列）

Question

我有导航。各个条目通过 Flexbox 一层一层地显示（方向：列）。如果导航条目获得“分隔符”类，则导航应进入下一行。

是否可以强制 Flexbox 执行“换行”？

.nav {
    display: flex;
    flex-direction: column;
}

.nav .child.seperator {
    force: wrap :P
}

我想通过导航条目的特定类来控制换行。应用示例：前两个条目位于彼此下方，第三个、第四个和第五个条目也在同一列中，但位于一个新列中。第六和第七也位于彼此下方，但位于第三列。

Answer 1

您可以使用 CSS 网格来实现此目的，但如果您有很多分隔符，则很难使其动态化。

.wrapper {
  display:grid;
  grid-template-rows:repeat(20,auto); /*big enough*/
  grid-auto-columns:1fr;
  grid-auto-flow:column; /*column direction*/
  grid-gap:5px;
}

.wrapper > span {
  background:#000;
  padding:5px;
  color:#fff;
}
/*first one*/
.seperator,
.seperator ~ span{
 grid-column:2;
}
/*second one*/
.seperator ~ .seperator,
.seperator ~ .seperator ~ span{
 grid-column:3;
}
/*and so one*/

<div class="wrapper">
  <span>some text</span>
  <span>some text</span>
  <span>some text</span>
  <span>some text</span>
  <span class="seperator">next</span>
  <span>some text</span>
  <span>some text</span>
  <span class="seperator">next</span>
  <span>some text</span>
  <span>some text</span>
  <span>some text</span>
</div>