Архив тегов: flexbox

Снова равномерное выравнивание блоков по ширине: постепенное улучшение до Flexbox

Задача равномерного выравнивания горизонтальных элементов (например, пунктов меню) по всей ширине контейнера стабильно остается актуальной в верстке. Два года назад Максим Усачев (psywalker) написал обстоятельнейший разбор ее решений, который заслуженно стал самой популярной статьей на CSS-live.ru. Были рассмотрены 4 варианта:

  1. Вариант с разносторонним выравниванием (на базе float), к сожалению, не способный претендовать на универсальность;
  2. Вариант с дополнительным контейнером (в принципе, работоспособное решение, но только для фиксированной ширины элементов);
  3. Вариант с text-align: justify для инлайн-блоков и дополнительным элементом-распоркой (приемлемое решение);
  4. То же самое, но с заменой элемента-распорки на псевдоэлемент :after (лучшее решение).

У двух последних решений была изюминка в виде двух малоизвестных свойств CSS3 (text-align-last и text-justify), по иронии судьбы с незапамятных времен работающих в IE (где они и появились).

Но прогресс открывает нам всё новые возможности, и у старых задач появляются новые, более простые решения. Нашлось оно и для равномерного выравнивания. (далее…)