За последние годы в применении технологий CSS случился крутой скачок. Теперь с его помощью веб-сайты стали выглядеть ещё круче, и многому научились — от всяких многослойных фоновдо анимаций. Как страшный сон забылись времена, когда чтобы сделать у элемента скруглённые уголки, нужно было полвечера убить на их нарезку и шаманство вёрстки. И вот, когда кажется, что CSS уже ответил почти на все запросы frontend-разработчика, наделив его почти безграничными возможностями, оказывается, что нужно еще больше! И одного CSS уже недостаточно.

И тогда нам на помощь приходят флексбоксы! О них и пойдёт речь в моей статье!

Что такое флексбоксы?

Flex (от англ. «flex» — растягивать) и flex-inline — это параметры для свойства элемента display. Однако, в отличие от других параметров этого свойства (block || inline-block || table и т.д.), они не задают новый тип отображения элемента, а вместо этого дают возможность управлять поведением вложенных в оборачивающий контейнер с этим свойством дочерних элементов. Внедрение этой технологии позволяет делать по-настоящему крутые вещи. К примеру, вот Macbook Air в 3D, сделанный на CSS:

See the Pen CSS only 3d Macbook Air by Burak Can (@neoberg) on CodePen.

Вызов свойств flex и flex-inline отличается от вызова других свойства параметра display. Вот как это выглядит на практике:

See the Pen Flex vs Display by Nico_t (@nico_t) on CodePen.

В примере показаны 4 блока (flex || inline-flex || block || inline-block), и, как видите, без определения дополнительных параметров флекс-элемента он ведёт себя так же, как и block || inline-block.

Свойства флексбоксов

Далее я на примерах покажу, как с помощью флексбоксов управлять вложенными блоками. Флекс-контейнеру («обертке» с свойством display: flex || inline-flex) доступны нижеперечисленные свойства.

Flex-direction - указывает ориентацию всех дочерних элементов объекта, имеет такие значения:

  • row (значение по умолчанию) – отображение слева на право;
  • row-reverse - отображение справа на лево;
  • column - отображение сверху вниз;
  • column-reverse - отображение снизу вверх;

See the Pen Ihjqv by Nico_t (@nico_t) on CodePen.

Flex-wrap – определяет, разделены ли дочерние элементы на несколько строк или столбцов. Может иметь одно из значений:

  • none (значение по умолчанию) - все дочерние элементы отображаются в одной строке или столбце (определяется свойством flex-direction);
  • wrap - элементы разделены на строки и отображаются последовательными параллельными строками или столбцами;
  • wrap-reverse – тоже что и предыдущее значения только наоборот.

See the Pen Flex-wrap by Nico_t (@nico_t) on CodePen.

Justify-content – свойство определяет положение внутренних элементов вдоль главной оси текущей строки контейнера (горизонтальное положение). Здесь можно упомянуть о свойстве align-content которое делает тоже что и justify-content только по другой оси. Доступные значения:

  • flex-start (значение по умолчанию) - элементы отображаются вначале строки;
  • flex-end – в конце строки;
  • center – по центру;
  • space-around - элементы распределены равномерно, отступы слева и справа от элементов равные;
  • space-between - space-between — равномерно распределены по всей базовой линии.

See the Pen Justify-content by Nico_t (@nico_t) on CodePen.

Align-items - свойство определяет положение дочерних елементов вдоль вертикальной оси. Значения:

  • flex-start – элементы отображаются в начале вертикальной оси;
  • flex-end - в конце оси;
  • center – по центру;
  • baseline – выравниваются по базовой линии;
  • stretch – занимают все доступное пространство.

К элементам, которые расположены внутри flex-контейнера, можно применять следующие свойства:

Order – определяет порядок (порядковую группу) расположения элементов. Значения должны быть целыми числами больше нуля. Начальное значение этого свойства — 0.

Flex-grow – определяет фактор ширины элемента по отношению к остальной части элементов в контейнере. Другими словами, он определяет, какое количество свободного пространства внутри контейнера элемент должен занять. Значения — целые числа больше ноля. Начальное значение — 0.

Flex-shrink – определяет возможность сжатия элемента (уменьшения ширины) при необходимости. Значения — целые числа больше нуля. Начальное значение — 1.

Flex-basis – задает размер элемента в flex-контейнере (например, 30%). Значение по умолчанию — auto (занимает все доступное пространство).

Если верить caniuse.com, сегодня, флексбоксы поддерживают 69% браузеров, из них 21% поддерживают их свойства частично.

Это значит, что внедрять их в рабочие проекты пока ещё рано, но изучать их использование и практиковаться — самое время. Уверен, потенциал у них колоссальный!