css - 强制 Flexbox 在特定元素之后换行(方向 : column)

Question

我有一个导航。各个条目使用 Flexbox(方向:列)逐个显示。如果导航条目获得类“分隔符”，则导航应分到下一行。

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

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

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

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

Answer 1

您可以通过引入具有 flex-basis: 100% 和 width: 0 的 flex 元素来实现您想要的效果。

查看此帖子以了解详分割类:https://tobiasahlin.com/blog/flexbox-break-to-new-row/

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

.nav .flex-break {
  flex-basis: 100%;
  width: 0;
}

<nav class="nav">
  <div>Navigation Entry</div>
  <div>Navigation Entry</div>
  <div>Navigation Entry</div>
  <div>Navigation Entry</div>
  <div class="flex-break"></div>
  <!-- This will force the rest into a new column -->
  <div>Navigation Entry</div>
  <div>Navigation Entry</div>
  <div>Navigation Entry</div>
  <div>Navigation Entry</div>
</nav>