Есть блоки, которые надо красиво расположить, я использовал flex, но у меня после перевода на новую строку остается место пустое, а надо чтобы там были элементы.
Код: https://yadi.sk/d/smAzrtXy3KjwyZ
-
2Ваша ссылка на проект тут не к чему, это не фриланс биржа. А вот Ваш код был бы очень кстати! Вообще похоже на masonry сетку masonry.desandro.com– SVE4 июл 2017 в 13:18
-
2Такое имхо проще флоатами сделать чем флексом– Darth4 июл 2017 в 13:18
Добавить комментарий
|
1 ответ
Делается такое не с помощью flex, а с помощью float
body {margin: 0;}
.parent {
display: block;
width: 100vw;
box-shadow: inset 2px 2px 0px red, inset -2px 2px 0px red, inset 2px -2px 0px red, inset -2px -2px 0px red;
overflow: hidden;
}
.child {
float: left;
width: 10vw;
height: 10vw;
box-shadow: inset 2px 2px 0px blue, inset -2px 2px 0px blue, inset 2px -2px 0px blue, inset -2px -2px 0px blue;
}
.child.big {
width: 40vw;
height: 40vw;
box-shadow: inset 2px 2px 0px green, inset -2px 2px 0px green, inset 2px -2px 0px green, inset -2px -2px 0px green;
float: right;
}
<div class="parent">
<div class="child big"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
<div class="child"></div>
</div>