Добрый день,
попался довольно хитрый макеты обычной текстовой страницы, который никак не могу корректно реализовать.
На мобильнике текст идёт одним столбцом. А на ПК эта страница полноэкранная и текст разбивается на одинаковые горизонтальные колонки. В экран влезает 2 колонки.
Для этого можно использоваться css columns, но она настолько нестабильная, что очень не хочется с ней связываться.
Попытался для этого дела применить flex-box.
Даём ему вертикальное направление, макс высоту 100% и flex-wrap: wrap.
на колонки разбивается, но есть 2 проблемы.
1. При ширине экрана в 1920px каждая колонка занимает по 5000px. На ФФ эту проблему решает align-items: center, но на остальных не работает (префиксы естественно есть).
2. нет расстояния между колонками.
https://jsfiddle.net/hojxnq8b/3/
Можно ли данную задачу доделать с помощью flex-box?
Любые другие варианты также приветствуются (даже js плагины)
Простой
Простой