принудительно прервать гибкое поле и отобразить элемент в следующем столбце

Question

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

.flex{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  max-height:200px;
  width:600px;
    background:#fafafa;
}
.item{
  background:#ddd;
  height: 30px;
  width: 100px;
  margin-bottom:5px;
}
.gonextColumn {
  background:#000
}

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

https://codepen.io/mkkdev/pen/RwNzQXK

Answer 1

Вы можете рассмотреть маржу взломать , как показано ниже:

.flex{
  display:flex;
  flex-direction:column;
  flex-wrap:wrap;
  max-height:200px;
  width:600px;
    background:#fafafa;
}
.item{
  background:#ddd;
  height: 30px;
  width: 100px;
  margin-bottom:5px;
}
.gonextColumn {
  background:#000;
  margin-bottom:200px; /* a big value here */
}
.gonextColumn + * {
  margin-top:-195px; /* the opposite of the big value minus the real margin*/
}

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