Властивості

display: flex | inline-flex;

Приміняється до: батьківського елементу flex-контейнера

Визначає flex-контейнер (інлайновий або блоковий в залежності від обраного значення), підключає flex-контекст для всіх його безпосередніх нащадків.

display: other values | flex | inline-flex;

• CSS-стовпці columns не працюють з flex-контейнером
• float, clear і vertical-align не працюють з flex-елементами

flex-direction

Застосовується до батьківського елемента flex-контейнера

Встановлює головну ось main-axis, визначаючи тим самим направлення для flex-елементів, що разміщуються в контейнері

flex-direction: row | row-reverse | column | column-reverse

• row: (за замовчуванням) зліва направо для ltr, зправа наліво для rtl;
• row-reverse: зправа наліво для ltr, зліва направо для rtl
• column: аналогічно row, зверху вниз;
• column-reverse: аналогічно row-reverse, зінизу вверх.

flex-wrap

Застосовується до батьківського елемента flex-контейнера

Визначає, чи буде контейнер однорядковим або багаторядковим, а також напрямок поперечної осі, що визначає напрямок, в якому будуть розташовуватися нові рядки.

flex-wrap: nowrap | wrap | wrap-reverse

• nowrap (по умолчанию): однострочный / слева направо для ltr, справа налево для rtl;
• wrap: многострочный / слева направо для ltr, справа налево для rtl;
• wrap-reverse: многострочный / справа налево для ltr, слева направо для rtl.

flex-flow

Застосовується до батьківського елемента flex-контейнера

Це скорочення для властивостей flex-direction і flex-wrap, разом визначають головну і поперечну осі. За замовчуванням приймає значення row nowrap.

flex-flow: <'flex-direction'> || <'flex-wrap'>

justify-content

Застосовується до батьківського елемента flex-контейнера

Визначає вирівнювання відносно головної осі. Сприяє ефективному розподілу вільне місце в разі, коли елементи рядки не «тягнуться», або тягнуться, але вже досягли свого максимального розміру. Також дозволяє до певної міри керувати вирівнюванням елементів при виході за межі рядка.

justify-content: flex-start | flex-end | center | space-between | space-around

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

align-items

Застосовується до батьківського елемента flex-контейнера

Визначає поведінку за замовчуванням для того, як flex-елементи розташовуються відносно поперечної осі на поточному рядку. Вважайте це версією justify-content для поперечної осі (перпендикулярної до основної).

align-items: flex-start | flex-end | center | baseline | stretch

• flex-start: граница cross-start для элементов располагается на позиции cross-start;
• flex-end: граница cross-end для элементов располагается на позиции cross-end;
• center: элементы выравниваются по центру поперечной оси;
• baseline: элементы выравниваются по своей базовой линии;
• stretch (по умолчанию): элементы растягиваются, заполняя контейнер (с учётом min-width/max-width).

align-content

Застосовується до батьківського елемента flex-контейнера

Вирівнює рядки flex-контейнера при наявності вільного місця на поперечної осі аналогічно тому, як це робить justify-content на головній осі.

Зауваження: це властивість не працює з однорядковим flexbox.

align-content: flex-start | flex-end | center | space-between | space-around | stretch

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

flex-grow

Застосовується до дочірнього елемента / flex-елементу.

Визначає для flex-елемента можливість «виростати» при необхідності. Приймає безрозмірне значення, що служить в якості пропорції. Воно визначає, яку частку вільного місця всередині контейнера елемент може зайняти. Якщо у всіх елементів властивість flex-grow задано як 1, то кожен нащадок отримає всередині контейнера однаковий розмір. Якщо ви задали одному з нащадків значення 2, то він забере в два рази більше місця, ніж інші.

flex-grow: <number> (по умолчанию 0)

flex-shrink

Застосовується до дочірнього елемента / flex-елементу.

Визначає для flex-елемента можливість стискатися при необхідності.

flex-shrink: (default 1)

flex-basis

Застосовується до дочірнього елемента / flex-елементу.

Визначає розмір за замовчуванням для елемента перед розподілом простору в контейнері.

flex-basis: | auto (default auto)

flex

Застосовується до дочірнього елемента / flex-елементу.

Це скорочення для flex-grow, flex-shrink i flex-basis. Другий і третій параметри (flex-shrink, flex-basis) необов'язкові. Значення за замовчуванням - 0 1 auto.

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

align-self

Застосовується до дочірнього елемента / flex-елементу.

Дозволяє перевизначити вирівнювання, задане за замовчуванням або в align-items, для окремих flex-елементів.

Зверніться до опису властивості align-items для кращого розуміння доступних значень.

align-self: auto | flex-start | flex-end | center | baseline | stretch