Выравнивание (по колличеству контента) блоков в Flexbox?

Question

[Анита Ковалева]

Всем привет, немного туплю с позиционированием.

Как сделать так, что бы левый нижний блок(5тый по счету), прыгнул во вторую колонку к элементам которые меньше по высоте. Что бы в первой колонке было 4 элемента, во второй 5. Или все таки придется задавать доп. обертку, и заворачивать 5 элементов в один wrap? Сейчас общему контейнеру задан flex,flex-wrap:wrap; дочерним элементам - flex-basis: 50%.

Answer 1

[Антон Усачев]

По высоте, наверное, никак, эта технология не предусматривает такого поведения. В помощь css columns на чистом цсс, что тоже вряд ли даст нужный результат, либо в идеале masonry на js.

Comments

[Михаил]

Ну или гриды

[Анита Ковалева]

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

[Анита Ковалева]

Михаил, Гриды можно было бы подключить, но нужна поддержка старых браузеров, поэтому юзаю только флексы с префиксами(

[Антон Усачев]

Анита Ковалева, в вопросе не было упомянуто, что весь сыр-бор из-за единственного статичного исполнения страницы. Сработала привычка, что на реальных рабочих проектах макет всегда изменчив, как при изменении количества контента в блоках, так и при разных ширинах экрана.

В данном случае может помочь justify-content: center, например.

[Анита Ковалева]

Антон Усачев, Тоже не подходит, блоки выравниваются по центру, и контент выглядит обрывистым, решила проблему запихнув блоки в доп. обертку, и растянув их. Спасибо)

Answer 2

[Илья Свиридов]

flex - контейнер придуман для гибкой верстки, он не предусматривает статику.
1. Ты можешь подогнать размеры контейнеров внутри по размеру так, чтобы было именно такое расположение.
2. Ты можешь выделить каждую колонку в отдельный контейнер и разместить элементы так, как тебе будет удобно(к примеру div)

Comments

[Анита Ковалева]

Ну я примерно так и думала что придется продавливать еще один контейнер для запихивания туда 5 блоков. В целом спасибо за подтверждение идеи)