css flex-box wrap, но избегайте области

Question

У меня есть div, который использует flex и оборачивает элементы ...

#container
{
    display: flex;
    flex-wrap: wrap;
}

Элементы переносятся в следующий ряд, когда достигают конца контейнера.Мне нужен регион, в котором предметы также будут обернуты.Вот пример того, что я хочу ...

Элементы (серые) обертывают следующий ряд, когда достигают региона (красный).

Мне интересно, можно ли это сделать с помощью flex-box.

Спасибо.

Answer 1

Проверьте это доказательство концепции, которое использует CSS Grid Layout.Вы можете пропустить область в сетке , используя псевдо элемент, который пуст и явно помещенчтобы создать эффект обтекания обернутых элементов.

См. демонстрацию ниже:

.grid {
  display: grid;
  grid-gap: 10px;
  grid-template-columns: repeat(6, [col-start] 1fr);
}

.grid>* {
  background-color: green;
  height: 60px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.grid:after {
  content: '';
  grid-row: 1; /* row 1 */
  grid-column: 4/7; /* skip columns 4 to 6 */
  border: 1px dashed #ddd;
}

<div class="grid">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
  <div>5</div>
  <div>6</div>
  <div>7</div>
  <div>8</div>
  <div>9</div>
  <div>10</div>
  <div>11</div>
</div>