Ищем баланс с помощью flex-wrap: balance
• css
Введение
text-wrap: balance стал отличным дополнением для тех, кто хотел более красивые заголовки и небольшие тексты (какие-нибудь карточки, например). text-wrap: pretty в чём-то смог доделать и улучшить, а Apple стала промотировать свойство для абзацев текста.
Сегодня text-wrap является простым однострочным улучшением вёрстки, которое “за бесплатно” делает жизнь лучше. А в Хроме 150 появляется новый… Двоюродный брат? Встречайте: flex-wrap: balance.
Сначала посмотрим
Новое значение позволяет решить проблему “висящих” элементов на последней строке.
Логика работы
Для начала вернёмся к простому флексбоксу и логике переносов:
Как это работает? Сначала вычисляется базовый размер, исходят из минимальных размеров и flex-basis. Элементы набиваются в строчки, пока хватает места. Место закончилось – начинаем новую строчку.
Как только строчки упакованы, можно распределять оставшееся место между элементами с flex-grow.
Звучит на что-то похоже? Всё верно, первая часть очень похожа на то, как рисуется текст: слова набиваются в строку, точно также создаются новые строки, и так далее. Единственное – отсутствует второй этап, и слова не растягиваются по ширине (вместо этого есть логика про justify).
Вспоминая text-wrap: balance, который занимался тем, что перекидывал слова между строчками, чтобы достичь наименьшей ширины, мы легко понимаем логику работы flex-wrap: balance: он делает тоже самое, что и text-wrap: balance, а после применяется flex-grow.
Кстати, не забыли и про reverse, достаточно указать flex-wrap: wrap-reverse balance. Конечно, можно и просто flex-wrap: wrap balance, но никакой разницы с просто balance это не несёт.
Фолбек!
Точнее, наполовину. Я думаю, достаточно часто встречаются интерфейсы, состоящие из иконок, карточек и тому подобного. В общем все те места, где flex-grow не используется.
Просто делаем “параграф” из наших блочных элементов, не забываем пробелы между ними, и вуаля:
Что же тогда даёт flex-wrap?
flex-growу элементов- Контроль выравнивания
- Вёрстка проще, отсутствие пробелов
wrap-reverse- Проще контроль отступов
column-rule/row-rule(спойлер к ещё одной новинке недавних релизов)
Итого
Мы снова получили подарок на рождество новый год: однострочное свойство, которое делает вёрстку лучше. И пусть я верю, что text-wrap: balance применим гораздо чаще, всё равно прослеживается тенденция: в браузеры завозят очень простые инструменты для разработчиков, которые под капотом делают невообразимые ранее вещи.
Всё ещё жду уменьшение ширины родительского элемента под ширину строк дочерних элементов. Как раз отлично сочетается с обоими balance.
