Снова равномерное выравнивание блоков по ширине: постепенное улучшение до Flexbox
Задача равномерного выравнивания горизонтальных элементов (например, пунктов меню) по всей ширине контейнера стабильно остается актуальной в верстке. Два года назад Максим Усачев (psywalker) написал обстоятельнейший разбор ее решений, который заслуженно стал самой популярной статьей на CSS-live.ru. Были рассмотрены 4 варианта:
- Вариант с разносторонним выравниванием (на базе float), к сожалению, не способный претендовать на универсальность;
- Вариант с дополнительным контейнером (в принципе, работоспособное решение, но только для фиксированной ширины элементов);
- Вариант с text-align: justify для инлайн-блоков и дополнительным элементом-распоркой (приемлемое решение);
- То же самое, но с заменой элемента-распорки на псевдоэлемент :after (лучшее решение).
У двух последних решений была изюминка в виде двух малоизвестных свойств CSS3 (text-align-last
и text-justify
), по иронии судьбы с незапамятных времен работающих в IE (где они и появились).
Но прогресс открывает нам всё новые возможности, и у старых задач появляются новые, более простые решения. Нашлось оно и для равномерного выравнивания.