1

Есть блоки, которые надо красиво расположить, я использовал flex, но у меня после перевода на новую строку остается место пустое, а надо чтобы там были элементы. Скрин Код: https://yadi.sk/d/smAzrtXy3KjwyZ

2
  • 2
    Ваша ссылка на проект тут не к чему, это не фриланс биржа. А вот Ваш код был бы очень кстати! Вообще похоже на masonry сетку masonry.desandro.com
    – SVE
    4 июл 2017 в 13:18
  • 2
    Такое имхо проще флоатами сделать чем флексом
    – Darth
    4 июл 2017 в 13:18

1 ответ 1

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>

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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