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

Answer 2

我只是使用flexbox方法进行导航。 height用于分隔符，可将行移至下一列。

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

.item {
    width: 150px;
    margin: 5px;
    background: #000;
    padding: 10px 0;
    color: #fff;
    text-align: center;
}

<div class="flex">
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
</div>

解决方案2：使用flex-direction:row：

*{
  box-sizing:border-box;
  position:relative; 
}

.flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}

.item {
    margin: 5px;
    background: #000;
    padding: 10px 0;
    color: #fff;
    width: 30%;
    text-align:center;
}

<div class="flex">
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
  <div class="item">Navigation</div>
</div>

Answer 3

您可以使用flex-wrap CSS属性来实现。

在此处查看MDN文档：https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap