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 you have read our privacy policy.

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