0

Во flex-контейнере есть элементы, ширина каждого одинаковая, высота зависит от контента. В одной «строке» должно быть 3 элемента, дальше перенос с помощью свойства flex-wrap: wrap.

Хочу при разной высоте блоков сохранить «прижатие» друг к другу по высоте. Пробовал разные варианты, но не получилось. Накидал песочницу:

<div class="container">
  <div class="point one"></div>
  <div class="point"></div>
  <div class="point"></div>
  <div class="point"></div>
  <div class="point"></div>
  <div class="point"></div>
</div>

.container {
  display: flex;
  flex-wrap: wrap;
  width: 390px;
}

.point{
  width: 120px;
  height: 80px;
  background: #ccc;
  margin: 5px;
}

.one {
  height: 120px;
}

https://jsfiddle.net/js0efwra/10/

Как прижать 5 и 6 элемент к 2 и 3?

2
  • 1
    Если я правильно понял задачу, то это masonry-раскладка, решается js-библиотекой, или css-grid
    – Aleksandr
    4 окт 2020 в 20:44
  • @Aleksandr она самая, спасибо! 4 окт 2020 в 20:45

2 ответа 2

0

Masonry-раскладка, [моё решение с помощью гридов][1]

[1]: https://codepen.io/Protoff/pen/JjXgxvb
0

В данном конкретном случае aligns-item: flex-end

.container {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  width: 390px;
}

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

3
  • Нужно сохранить выравнивание первых элементов по верхнему краю контейнера 4 окт 2020 в 20:46
  • @Ivan Stepin, а... т.е. вверх чтоб все прижато было?
    – Zhihar
    4 окт 2020 в 20:49
  • Да. Под самим постом подсказали, что это masonry раскладка, пойду изучать) 4 окт 2020 в 20:51

Ваш ответ

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

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