flex-direction
Ця властивість показує, як flex-елементи розміщуються у flex-контейнері, задаючи напрямок головної осі flex-контейнера. Елементи можуть розташовуватися за двома основними напрямками — як рядки по горизонталі або як стовпці по вертикалі.-елементи розміщуються в ряд зліва направо в контексті ltr.
.flex-container { flex-direction: row; } 
При значенні row-reverse flex-елементи розташовуються в ряд праворуч наліво в контексті ltr.
.flex-container { flex-direction: row-reverse; } 
Зі значенням column flex-елементи розміщуються в колонку зверху вниз.
.flex-container { flex-direction: column; } 
При значенні column-reverse flex-елементи розташовуються в колонку знизу вгору.
Значення за замовчуванням: row.
row та row-reverse залежать від режиму написання, так що в контексті rtl вони будуть відповідно перевернуті. Якщо flex-контейнер має свої елементи в один або кілька рядків, то властивість flex-wrap керує напрямком, в якому ці нові рядки розташовуються.
Значення
.flex-container { flex-wrap: nowrap; }flex-елементи відображаються в один рядок, за замовчуванням вони зменшуються, щоб відповідати ширині flex-контейнера.
.flex-container { flex-wrap : wrap; }flex-елементи відображаються у декілька рядків, якщо це необхідно, зліва направо та зверху вниз.
.flex-container { flex-wrap: wrap-Reverse; }flex-елементи відображаються у декілька рядків, якщо це необхідно, зліва направо та знизу вгору.
Значення за замовчуванням: nowrap.
Ці властивості залежать від режиму написання, тому в контексті rtl вони будуть відповідно перевернуті.
flex-flow
Ця властивість є скороченням для встановлення властивостей flex-direction та flex-wrap.
Значення
.flex-container { flex-flow: <flex-direction> || <flex-wrap>; }Значення за замовчуванням: row nowrap.
justify-content
Властивість justify-content вирівнює flex-елементи вздовж головної осі поточного рядка flex-контейнера. Властивість допомагає розподіляти вільний простір, що залишився, коли всі flex-елементи в рядку не розтягуються або розтягуються, але досягли максимального розміру.
Значення
. flex-container { justify-content: flex-start; }flex-елементи вирівнюються з лівого боку flex-контейнера в контексті ltr.
.flex-container { justify-content: flex-end ; }flex-елементи вирівнюються з правого боку flex-контейнера в контексті ltr.
.flex-container { justify-content: center; }flex-елементи вирівнюються по центру flex-контейнера.
.flex-container { justify-content: space-between; }flex-елементи відображаються з рівним інтервалом між ними, перший і останній flex-елементи вирівнюються по краях flex-контейнера.
.flex-container { justify-content: space-around; }flex-елементи відображаються з рівним інтервалом навколо кожного flex-елемента, включаючи перший і останній.
Значення за замовчуванням: flex-start.
align-items
flex-елементи можуть бути вирівняні по поперечній осі поточного рядка flex-контейнера, подібно justify-content, але у перпендикулярному напрямку. Ця властивість встановлює стандартне вирівнювання для всіх flex-елементів, включаючи анонімних.
Значення
.flex-container { align-items: stretch ; }flex-елементи заповнюють всю висоту (або ширину) від поперечного початку до поперечного кінця flex-контейнера.
.flex-container { align-items : flex-start; }flex-елементи розташовуються біля поперечного початку flex-контейнера.
.flex-container { align-items: flex-end; }flex-елементи розташовані біля поперечного кінця flex-контейнера.
.flex-container { align-items: center; }flex-елементи розташовані в центрі поперечної осі flex-контейнера.
.flex-container { align-items: baseline; }flex-елементи вирівнюються таким чином, щоб їх базові лінії були вирівняні.
Значення за замовчуванням: stretch .
Докладніше про те, як розраховуються базові лінії, читайте тут.
align-content
Властивість align-content вирівнює рядки всередині flex-контейнера, коли в поперечній осі є додатковий простір, подібно до того, як justify-content вирівнює окремі елементи по головній осі.
Значення
.flex-container { align-content: stretch; }flex-елементи відображаються з додатковим простором після кожного рядка flex-елементів.
.flex-container { align-content: flex-start; }flex-елементи розташовуються стопкою біля поперечного початку flex-контейнера.
.flex-container { align-content: flex-end; }flex-елементи розташовуються стопкою біля поперечного кінця flex-контейнера.
.flex-container { align-content: center; }Рядки flex-елементів розташовуються в центрі поперечної осі flex-контейнера.
.flex-container { align-content: space-between; }Рядки flex-елементів відображаються з рівним інтервалом між ними, перший і останній рядки вирівнюються по краях flex-контейнера.
.flex-container { align-content: space-around; }flex-елементи відображаються з рівним інтервалом навколо кожного рядка.
Значення за замовчуванням: stretch.
Ця властивість має ефект лише тоді, коли flex-контейнер містить кілька рядків flex-елементів. Якщо елементи розміщуються в один рядок, властивість align-content ніяк не впливає на макет.
Примітки
- Всі властивості column-* не впливають на flex-контейнер.
- Псевдоелементи ::first-line та ::first-letter не застосовуються до flex-контейнерів.