Сделать гибкие строки выступать в качестве столбцов для сохранения строки времени

Question

Прежде всего: спасибо за ваше время!
Я ищу блог с Flex бокс. Я смотрел несколько мест (here, here, here, here, here и here), но я не могу получить эффект «блога», который я хочу. Я ищу, чтобы сделать двухэтажный макет, который можно было бы сделать с помощью flex-direction: column;.
К сожалению, это приведет к столбцу последних сообщений с колонкой гораздо более старых сообщений на ее стороне. Если я не буду следить за временем в блоге, я чувствую, что мне нужно будет использовать flex-direction: row; в сочетании с flex-wrap: wrap;.
Этот вариант хорошо работает с сообщениями с одинаковой высотой, но приводит к потерянному пространству при изменении высоты.

На левой стороне мой текущий результат, на правой стороне искомым:

я понимаю, что это, очевидно, сетка, которая требует двух столбцов, а не строк. Но есть ли способ сделать свойства align-items и align-content достигать такого вида макета в линейке Flex на основе строк (и это без Javascript)? Или, если это невозможно, например, this, можно ли использовать столбец, чтобы поддерживать столбцы? Должен ли я использовать что-то еще, кроме Flex?

Это моя текущая ситуация вынудила как можно проще:

.container{ 
 
    display: flex; 
 
    flex-direction: row; 
 
    flex-wrap: wrap; 
 
    width: 100%; 
 
} 
 

 
.container div{ 
 
    border: 1px solid black; 
 
    width: 40%; 
 
}

<div class="container"> 
 
    <div> 
 
    1 
 
    </div> 
 
    <div> 
 
    2 
 
    </div> 
 
    <div> 
 
    3 
 
    <br/> 
 
    <br/> 
 
    <br/> 
 
    </div> 
 
    <div> 
 
    4 
 
    </div> 
 
    <div> 
 
    5 
 
    </div> 
 
</div>

Спасибо,
Maxime

Answer 1

Что вы стремитесь называется Masonry effect.

Это может быть сделано с помощью CSS3 columns, Flex-box, или путем применения custom plugin.

Существует, однако некоторые вопросы, используя CSS столбцы, так как они являются относительно новой спецификации, и они могут вызвать некоторые нежелательные поведение для ваших посетителей.

Вы можете видеть, что я имею в виду на странице Can I use chart for CSS3 columns.

Мой совет состоит в том, чтобы выбрать вариант Flexbox, который будет менее проблематичным, используя the right prefixes.

Посмотреть codepen Я разместил о.

Просто измените ширину столбцов и использовать его вне коробки

div#masonry img { // and the img here will be your post 
    width: 33.3%; // to > 49.5% or whatever suits your needs 
    transition: .8s opacity; 
} 

Или вы можете выкопать на веб-сайте наиболее часто используемых JS Masonry plugin, и все, что вам нужно сделать, это оберните голову вокруг его работ.