Принудительно переносить Flexbox после определенного элемента (направление: столбец)

Question

У меня есть навигация.Отдельные записи отображаются одна под другой с Flexbox (направление: столбец).Если элемент навигации получает класс "seperator", навигация должна перейти на следующую строку.

Можно ли заставить Flexbox выполнить "перенос"?

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

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

Я хочу иметь контроль над переносом с помощью определенного класса записи навигации.Пример применения: первые две записи находятся ниже друг друга, третья, четвертая и пятая также, но в новом столбце.Шестой и седьмой также ниже друг друга, но в третьем столбце.

Answer 1

Этого можно добиться, используя свойство CSS flex-wrap.

Ознакомьтесь с документацией MDN для этого здесь: https://developer.mozilla.org/en-US/docs/Web/CSS/flex-wrap

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

Вы можете добиться этого с помощью 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>