0

Подскажите возможность обтекания элементов при переносе flex-wrap.

Сейчас при переносе:

введите сюда описание изображения

Нужно чтобы блоки обтекали большой div и заполняли пустое пространство:

введите сюда описание изображения

Есть ли решение без обертки div, на flex-box или по другому?

1 ответ 1

0

На flex никак.

Можно через float:

.parent {
  width: 302px;
  padding: 0;
}

.children {
  display: inline-block;
  width: 78px;
  height: 20px;
  margin: 10px;
  background: red;
  list-style-type: none;
}

.children--first {
  float: left;
  height: 60px;
}
<div class='parent'>
  <div class='children children--first'>1</div>
  <div class='children'>2</div>
  <div class='children'>3</div>
  <div class='children'>4</div>
  <div class='children'>5</div>
  <div class='children'>6</div>
  <div class='children'>7</div>
  <div class='children'>8</div>
</div>

Или через grid:

.wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 100px;
}

.box {
  background: green;
  margin: 10px;
}

.box1 {
  grid-column-start: 1;
  grid-column-end: 1;
  grid-row-start: 1;
  grid-row-end: 3;
}
<div class="wrapper">
  <div class="box box1">1</div>
  <div class="box">2</div>
  <div class="box">3</div>
  <div class="box">4</div>
  <div class="box">5</div>
  <div class="box">6</div>
  <div class="box">7</div>
  <div class="box">8</div>
</div>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.