✨ Как не оставить один пункт меню одного на новой строке

Когда во флексбоксе включён перенос (flex-wrap: wrap), элементы уходят на следующую строку, как только перестают помещаться. Бывает, что там оказывается ровно один: пять пунктов меню сверху и одинокий «Speaking» снизу.

Обычно это чинят медиазапросом, но он легко ломается, стоит поменять текст. Новое значение flex-wrap: balance делает иначе: браузер сам раскладывает элементы по строкам ровнее, без расчётов ширины.

.channels {
display: flex;
flex-wrap: balance;
justify-content: center;
gap: 1rem;
}

Для сравнения: тот же ряд иконок соцсетей без balance приходится выравнивать обходными путями, от контейнерных запросов до display: contents. Все четыре варианта из разбора заметно длиннее.

Оговорка: на момент публикации это работает только в Chrome, начиная со 150-й версии.

Рядом появилось ещё свойство flex-line-count, которое задаёт минимальное число строк, и на нём получается даже экспериментальная masonry-раскладка.

👉 @seniorFront