0

Имеются блоки, высота которых зависит от контента, блоки идут по порядку друг за другом, необходимо их расположить как на картинке. введите сюда описание изображения Для этого пишу следующее

.blog-list {
    max-width: 1220px;
    width: 100%;
    margin: 0 auto;
}
.blog-item {
    background-color: green;
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    flex-direction: column;
    max-width: 374px;
    width: 100%;
    margin-right: 42px;
    margin-bottom: 50px;
    text-decoration: none;
    padding: 20px;
}
.blog-item:nth-child(3n) {
    margin-right: 0;
}
<div class="blog-list">
  <div class="blog-item">text text text</div>
  <div class="blog-item">texttext text</div>
  <div class="blog-item">
    texttexttexttexttexttexttexttexttext
    texttexttexttexttexttexttexttexttext 
  </div>
  <div class="blog-item">text</div>
</div>

Но в конечном итоге то, как на картинке не получается. Подскажите, что я делаю не так, а если на flexbox css такое невозможно, то как это сделать традиционным способом?

1
  • Сформулируйте задачу более точно. Сейчас на рисунке 6 блоков, а в вашем примере только 4. Правильно ли я понял, что блоки надо упорядочить по строками, а сжать вверх по колонкам, или каким-то из эти х требований можно пренебречь? Вы хотите стилями получить Masonry? Вариант с помощью Grid подходит? 24 авг 2018 в 10:11

1 ответ 1

1

Понял задачу так: на мобильном 6 блоков подряд в столбик, а на десктопе - по трём колонкам и в нужном порядке.

mobile

При переходе через нужный брекпоинт превращаем внешний блок во флекс.

display: flex;

Направляем его вертикально и задаём ему ограничение по высоте, чтобы образовались колонки.

flex-direction: column;
flex-wrap: wrap;
height: 300px;

А внутренние блоки переставляем в нужном порядке с помощью свойства order.

Проверьте: https://codepen.io/glebkema/pen/WgQyEq

/* the heart of the matter */
@media (min-width: 500px) {
  .demo {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    height: 300px;
  }  
  .demo-box-1 { order: 1; }
  .demo-box-2 { order: 3; }
  .demo-box-3 { order: 5; }
  .demo-box-4 { order: 2; }
  .demo-box-5 { order: 4; }
  .demo-box-6 { order: 6; }
}

/* decorations */
.demo-box {
  color: #fff;
  font: bold 24px/1 'Open Sans', sans-serif;
  padding: 12px 15px 18px;
}
.demo-box-1 { background: #69c; min-height: 135px; }
.demo-box-2 { background: #c69; min-height:  45px; }
.demo-box-3 { background: #9c6; min-height:  90px; }
.demo-box-4 { background: #369; min-height:  60px; }
.demo-box-5 { background: #936; min-height: 105px; }
.demo-box-6 { background: #693; min-height: 120px; }
<div class="demo">
  <div class="demo-box demo-box-1">1</div>
  <div class="demo-box demo-box-2">2</div>
  <div class="demo-box demo-box-3">3</div>
  <div class="demo-box demo-box-4">4</div>
  <div class="demo-box demo-box-5">5</div>
  <div class="demo-box demo-box-6">6</div>
</div>

2
  • спасибо за помощь, но в вашем решении есть один недостаток, по идеи если блок будет не 6, а скажем 18, то для каждого блока задавать order, как-то не очень. Да тут можно js применить, но интересно как на css реализовать. И неподскажите почему, если я добавляю .demo-box {margin-bottom: 20px;}, то порядок слетает prntscr.com/kmd4v6 ? 24 авг 2018 в 9:54
  • Порядок портит жестко заданная высота внешнего блока. Увеличьте её немного и колонок станет снова три. К сожалению, не знаю другого надёжного способа заставить флекс-колонки складываться. 24 авг 2018 в 10:05

Ваш ответ

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

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