@smithana

Как разбить текст на горизонтальные колонки?

Добрый день,

попался довольно хитрый макеты обычной текстовой страницы, который никак не могу корректно реализовать.
На мобильнике текст идёт одним столбцом. А на ПК эта страница полноэкранная и текст разбивается на одинаковые горизонтальные колонки. В экран влезает 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 плагины)
  • Вопрос задан
  • 1142 просмотра
Пригласить эксперта
Ответы на вопрос 2
@RomanChasovitin
Front-End developer
https://jsfiddle.net/RomanChasovitin/hojxnq8b/9/ глянь вот такую реализацию. Это то, что тебе нужно?
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы