Уна Кравец у себя в социальных сетях поделилась анонсом свойства
flex-wrap: balance, которое уже доступно в Chrome Canary. Название и механика работы похожа на свойство text-wrap: balance, которое год назад появилось во всех браузерах. Оно меняет алгоритм переноса текста так, чтобы строки были примерно одинаковой длины или сбалансированными, откуда и название.text-wrap: balance решает проблему подвисших слов в заголовках, когда в первой строке много текста, а во второй одно или пара слов. Идея сделать такое же свойство для flexbox обсуждается с 2018 года. Сейчас элементы flex-контейнера переносятся по одному, если им не хватает места. Они ведут себя, по сути, как слова в обычных блоках с текстом.Свойство
flex-wrap: balance разрешает перенос элементов (по умолчанию flex-wrap: nowrap не разрешает), и включает алгоритм балансировки (в отличие от flex-wrap: wrap). На новую строку будет переноситься не только тот элемент, которому не хватило места в строке, а такое количество элементов, при котором общая ширина каждой строки будет примерно одинаковой.У
text-wrap: balance есть ограничение: балансировка действует для текста, у которого не более 6 строк в Chrome и не более 10 строк в Firefox. Ограничение действует из-за особенностей переноса текста и алгоритма балансировки. При большом количестве строк это может негативно сказываться на производительности. Будут ли подобные ограничения у flex-wrap: balance — не известно.В целом это небольшое, но приятное улучшение для flexbox. И, что важно, улучшение прогрессивное. Если браузер не поддерживает
flex-wrap: balance, страница не развалится. Главное дополнительно указать flex-wrap: wrap, чтобы браузер откатился к стандартному механизму переноса.#css