Подскажите возможность обтекания элементов при переносе flex-wrap
.
Сейчас при переносе:
Нужно чтобы блоки обтекали большой div
и заполняли пустое пространство:
Есть ли решение без обертки div
, на flex-box
или по другому?
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуНа 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>