Как работает Flexbox? (часть 2)

Дочерние элементы модуля Flexbox или гибкие элементы находятся внутри родительского элемента (flex-контейнера) и им присваиваются определенные свойства и значения, которые мы рассмотрим сегодня.

Если вы еще не знакомы с Flexbox, рекомендуем прочесть первую часть статьи «Как работает Flexbox» и узнать о модуле больше!

order

Flex элементы по умолчанию располагаются в исходном порядке. Свойство order управляет порядком появления этих элементов внутри flex-контейнера. Задается целым числом.

Основные значения order:

• Initial значение свойства устанавливается в значение по умолчанию
• Inherit значение свойства наследуется от родительского элемента

flex

Это сокращенное название свойств flex-grow, flex-shrink и flex-basis. Значение по умолчанию – flex: 0 1 auto. Можно указать как одно значение свойств, так и все три. Однако рекомендуется использовать именно сокращенную запись, так как она правильно обходит любые неуказанные компоненты.

flex-grow

Это свойство называется коэффициентом роста, поскольку определяет способность flex элемента растягиваться относительно других flex элементов в контейнере при распределении свободного пространства.

Например, если установлено значение 1 для всех элементов flex-grow, оставшееся пространство в родительском элементе будет равномерно распределено между всеми дочерними элементами.

Если установлено значение 2 одному из дочерних элементов, то этот элемент займет в два раза больше места, чем остальные. Свойство имеет по умолчанию значение – 0 и не поддерживает отрицательные числа.

flex-shrink

Свойство указывает коэффициент сжатия гибкого элемента относительно других при распределении свободного отрицательного пространства. В зависимости от того, насколько элемент может сжаться, будет пропорционально распределено отрицательное пространство. Значение по умолчанию – 1.

flex-basis

Это свойство определяет начальный основной размер flex-элемента перед распределением свободного пространства в соответствии с коэффициентом гибкости. Базовый гибкий размер определяется так же, как width для всех значений, кроме auto и контент.

Основные значения flex-basis:

• Auto – Элемент получает базовый размер, который соответствует размеру его содержимого
• Content – Определяет базовый размер на основе содержимого дочернего элемента.

align-self

Свойство aling-self позволяет выравнивать дочерний элемент по высоте родительского, благодаря переопределению выравнивания, заданного с помощью align-items.

Основные значения aling-self:

• Аuto – значение по умолчанию. Flex-элемент использует align-items родительского элемента;

• Flex-start Верхний край flex-элемента помещается вплотную с flex-линией, проходящей через начало поперечной оси;

• Flex-end Нижний край flex-элемента помещается вплотную с flex-линией, проходящей через конец поперечной оси;

• Center – flex-элемент центрируется по поперечной оси в пределах flex-линии;

• Baseline – flex-элемент выравнивается по базовой линии;

• Stretch – элемент растягивается, занимая все пространство по высоте, если ни одно из поперечных значений margin не равно auto.

Итак, мы рассмотрели все свойства дочерних и родительских элементов гибкого модуля макета гибкого контейнера CSS Flexbox. Модуль Flexbox позволяет решать следующие задачи:

• Переопределять порядок отображения элементов;
• Располагать элементы в одном из четырех направлений: слева направо, справа налево, сверху вниз или снизу вверх;
• Решать проблему с центрированием по горизонтали и вертикали;
• Создавать колонки одинаковой высоты;
• Автоматически определять размеры элементов таким образом, чтобы они вписывались в доступное пространство;
• не допускать переполнения внутри контейнера, путем переноса внутренних элементов.