Flexbox

Display: flex

И теперь родительскому элементу добавляем display: flex;. Внутренние div-ы выстраиваются в ряд (вдоль главной оси) колонками одинаковой высоты, независимо от содержимого.

display: flex; делает все дочерние элементы резиновыми — flex, а не инлайновыми или блочными, как было изначально.

Если родительский блок содержит картинки или текст без оберток, они становятся анонимными flex-элементами.

Свойство display для Flexbox может принимать два значения:

flex — ведёт себя как блочный элемент. При рассчете ширины блоков приоритет у раскладки (при недостаточной ширине блоков контент может вылезать за границы).

inline-flex — ведёт себя как инлайн-блочный. Приоритет у содержимого (контент растопыривает блоки до необходимой ширины, чтобы строчки, по возможности, поместились).

Flex-direction

Направление раскладки блоков управляется свойством flex-direction.

Возможные значения:

row — строка (значение по умолчанию);

row-reverse — строка с элементами в обратном порядке;

column — колонка;

column-reverse — колонка с элементами в обратном порядке.

row и row-reverse:

column и column-reverse:

Flex-wrap

Возможные значения:

nowrap — блоки не переносятся (значение по умолчанию);

wrap — блоки переносятся;

wrap-reverse — блоки переносятся и располагаются в обратном порядке.

Для короткой записи свойств flex-direction и flex-wrap существует свойство: flex-flow.

Возможные значения: можно задавать оба свойства или только какое-то одно. Например:

flex-flow: column;

flex-flow: wrap-reverse;

flex-flow: column-reverse wrap;

Демо для row-reverse wrap-reverse:

Order

Возможные значения: числа. Чтобы поставить блок самым первым, задайте ему order: -1:

Justify-content

justify-content и align-items применяются к родительскому контейнеру, align-self — к дочерним.

justify-content отвечает за выравнивание по главной оси.

Возможные значения justify-content:

flex-start — элементы выравниваются от начала главной оси (значение по умолчанию);

flex-end — элементы выравниваются от конца главной оси;

center — элементы выравниваются по центру главной оси;

space-between — элементы выравниваются по главной оси, распределяя свободное место между собой;

space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя.

flex-start и flex-end:

center:

space-between, space-around:

Align-items

Возможные значения align-items:

flex-start — элементы выравниваются от начала перпендикулярной оси;

flex-end — элементы выравниваются от конца перпендикулярной оси;

center — элементы выравниваются по центру;

baseline — элементы выравниваются по базовой линии;

stretch — элементы растягиваются, занимая все пространство по перпендикулярной оси (значение по умолчанию).

flex-start, flex-end:

center:

baseline, stretch:

Align-self

align-self также отвечает за выравнивание по перпендикулярной оси, но задается отдельным flex-элементам.

Возможные значения align-self:

auto — значение по умолчанию. Означает, что элемент использует align-items родительского элемента;

flex-start — элемент выравнивается от начала перпендикулярной оси;

flex-end — элемент выравнивается от конца перпендикулярной оси;

center — элемент выравнивается по центру;

baseline — элемент выравнивается по базовой линии;

stretch — элемент растягивается, занимая все пространство по высоте.

flex-start:

Align-content

Возможные значения:

flex-start — элементы выравниваются от начала главной оси;

flex-end — элементы выравниваются от конца главной оси;

center — элементы выравниваются по центру главной оси;

space-between — элементы выравниваются по главной оси, распределяя свободное место между собой;

space-around — элементы выравниваются по главной оси, распределяя свободное место вокруг себя;

stretch — элементы растягиваются, заполняя всю высоту (значение по умолчанию).

flex-start, flex-end:

center, stretch:

space-between, space-around: