Що робить функція Flex

Що робить функцію Flex?

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

flex-basis: визначає початковий розмір flex-елемента
flex-shrink : визначає, як flex-елемент зменшуватиметься щодо інших flex-елементів у flex-контейнері
flex-grow : визначає, як flex-елемент збільшуватиметься щодо інших flex-елементів у flex-контейнері

flex-basis

Flex-контейнер може збільшуватися або зменшуватися вздовж центральної осі, наприклад, при зміні розмірів браузера, якщо контейнер має нефіксовані розміри. І разом з контейнером також можуть збільшуватися та зменшуватись його flex-елементи. Властивість flex-basis визначає початковий розмір flex-елемента перед тим, як він почне змінювати розмір, підлаштовуючись під розміри flex-контейнера.

Ця властивість може приймати такі значення:

auto : початковий розмір flex-елемента встановлюється автоматично
content : розмір flex-елемента визначається за його вмістом, у той же час це значення підтримується не всіма сучасними браузерами, тому його поки що варто уникати
числове значення: ми можемо встановити конкретне числове значення для розмірів елемента



Flexbox у CSS3 .flex-container < display: flex; border:1px #ccc solid; >.flex-item <text-align:center; font-size: 1em; padding: 1.2em; color: white; >.item1 .item2 .item3
Flex Item 1
Flex Item 2
Flex Item 3

У першого елемента властивості flex-basis встановлено значення auto. Тому перший елемент як реальне значення для ширини буде використовувати значення властивості width.

У другого елемента властивості flex-basis встановлено значення auto, проте і властивість width має значення auto.Тому реальна ширина елемента встановлюватиметься за його вмістом.

У третього елемента властивість flex-basis має конкретне значення, яке використовується. А властивість width у разі вже не грає ніякої ролі.

flex-shrink

Якщо flex-контейнер має недостатньо місця для розміщення елемента, то подальшу поведінку цього елемента ми можемо визначити за допомогою властивості flex-shrink. Воно вказує, як елемент усікатиметься щодо інших елементів.

Як значення властивість набуває числа. За замовчуванням значення 1.

Розглянемо дію цієї властивості з прикладу:



Flexbox у CSS3 .flex-container < display: flex; border:1px #ccc solid; width:400px; >.flex-item <text-align:center; font-size: 1em; padding: 1.2em; color: white; >.item1 .item2 .item3
Flex Item 1
Flex Item 2
Flex Item 3

У разі початкова ширина кожного елемента дорівнює 200px, тобто сукупна ширина становить 600px. Однак ширина flex-контейнера складає лише 400px. Тобто розмір контейнера недостатній для вміщення в нього елементів, тому в дію набуває властивість flex-shrink, яка визначена в елементів.

Для усічення елементів браузер обчислює коефіцієнт усічення (shrinkage factor). Він обчислюється шляхом перемноження значення властивості flex-basis на flex-shrink. Таким чином, для трьох елементів ми отримаємо такі обчислення:

// перший елемент 200px * 1 = 200 // другий елемент 200px * 2 = 400 // третій елемент 200px * 3 = 600

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

flex-grow

Властивість flex-grow керує розширенням елементів, якщо у flex-контейнері є додаткове місце.

Як значення властивість flex-grow приймає позитивне число, яке вказує, скільки разів елемент буде збільшуватися щодо інших елементів при збільшенні розмірів flex-контейнера За замовчуванням властивість flex-grow дорівнює 0.

Отже, використовуємо властивість flex-grow:



Flexbox у CSS3 .flex-container < display: flex; border:1cx solid; >.flex-item;
Flex Item 1
Flex Item 2
Flex Item 3

Отже, для кожного елемента є базові початкові розміри.

У міру розтягування контейнера збільшуватимуться елементи відповідно до властивості flex-grow, яка вказана для кожного елемента, Простір, на який розтягується контейнер, вважається додатковим простором.

Так як у першого елемента властивість flex-grow дорівнює 0, то перший елемент матиме константні постійні розміри. Тому другий елемент збільшуватиметься на 1/3 додаткового простору, на який розтягується контейнер, а третій елемент отримуватиме 2/3 додаткового простору.

Властивість flex

Властивість flex є поєднанням властивостей flex-basis, flex-shrink та flex-grow і має наступний формальний синтаксис:

flex: [flex-grow] [flex-shrink] [flex-basis]

За промовчанням властивість flex має значення 0 1 auto.

Окрім конкретних значень для кожного з підсвойств ми можемо задати для властивості flex одне із трьох загальних значень:

flex: none : еквівалентно 0 0 auto , при якому flex-елемент не розтягується і не усікається при збільшенні та зменшенні контейнера
flex: auto : еквівалентно значенню 1 1 auto
flex: initial : еквівалентно 0 1 auto

Так, застосуємо властивість flex:



Flexbox у CSS3 .flex-container < display: flex; border:1px #ccc solid; width: 600px; >.flex-item <text-align:center; font-size: 16px; padding: 10px 0; color: white; >.item1 .item2 .item3 .item4
Flex Item 1
Flex Item 2
Flex Item 3
Flex Item 4

Тут кожен елемент має початкову ширину 150 пікселів, так як у всіх елементів властивість flex-basis має значення 0, що в цілому для всіх елементів становитиме 600 пікселів.

При стисненні контейнера зменшуватимуться 3-й і 4-й елементи, так як у них властивість flex-shrink більша за нуль. І оскільки в обох елементів ця властивість дорівнює 1, то обидва елементи зменшуватимуться в рівних частках.

При розтягуванні контейнера збільшуватимуться 2-й та 4-й елементи, оскільки у цих елементів властивість flex-grow більша за нуль. І також, оскільки ця властивість дорівнює 1, ці елементи будуть збільшуватися в рівних частках.

2.23. CSS flexbox

CSS flexbox (Flexible Box Layout Module) — модуль макета гнучкого контейнера — це спосіб компонування елементів, в основі лежить ідея осі.

Flexbox складається з гнучкого контейнера (flex container) і гнучких елементів (flex items). Гнучкі елементи можуть вишиковуватися в рядок або стовпчик, а вільний простір, що залишився, розподіляється між ними різними способами.

Модуль flexbox дозволяє вирішувати такі завдання:

Розташовувати елементи в одному з чотирьох напрямків: ліворуч праворуч, праворуч ліворуч, зверху вниз або знизу вгору.
Перевизначати порядок відображення елементів.
Автоматично визначати розміри елементів так, щоб вони вписувалися в доступний простір.
Вирішувати проблему з горизонтальним та вертикальним центруванням.
Переносити елементи всередині контейнера, не допускаючи його переповнення.
Створювати стовпчики однакової висоти.
Створювати притиснутий донизу сторінки підвал сайту.

Flexbox вирішує специфічні завдання - створення одновимірних макетів, наприклад, навігаційної панелі, оскільки flex-елементи можна розміщувати лише по одній з осей.

Список поточних проблем модуля та крос-браузерних рішень для них ви можете прочитати у статті Philip Walton Flexbugs.

Що таке flexbox

Зміст:
1. Основні поняття
2. Flex-контейнер
3. Flex-елементи
4. Порядок відображення flex-елементів та орієнтація
4.1. Напрямок головної осі: flex-direction
4.2. Управління багаторядковістю flex-контейнера: flex-wrap
4.3. Короткий запис напрямку та багаторядності: flex-flow
4.4. Порядок відображення flex-елементів: order
5. Гнучкість flex-елементів
5.1. Завдання гнучких розмірів однією властивістю: flex
5.2. Коефіцієнт зростання: flex-grow
5.3. Коефіцієнт стиснення: flex-shrink
5.4. Базовий розмір: flex-basis
6. Вирівнювання
6.1. Вирівнювання по головній осі:
6.2. Вирівнювання по поперечній осі: align-items та align-self
6.3. Вирівнювання рядків flex-контейнера: align-content

Підтримка браузерами

IE: 11.0, 10.0 -ms-
Firefox: 28.0, 18.0 -moz-
Chrome: 29.0, 21.0 -webkit-
Safari: 6.1 -webkit-
Opera: 12.1 -webkit-
iOS Safari: 7.0 -webkit-
Opera Mini: 8
Android Browser: 4.4, 4.1 -webkit-
Chrome для Android: 44

1. Основні поняття

Для опису Flexbox використовується певний набір термінів.Значення flex-flow та режим запису визначають відповідність цих термінів фізичним напрямкам: верх/право/низ/ліво, осям: вертикальна/горизонтальна та розмірам: ширина/висота.

Головна вісь (main axis) - Вісь, вздовж якої викладаються flex-елементи. Вона простягається в основному вимірі.

Main start та main end — лінії, які визначають початкову та кінцеву сторони flex-контейнера, щодо яких викладаються flex-елементи (починаючи з main start у напрямку main end).

Основний розмір (main size) - ширина або висота flex-контейнера або flex-елементів, залежно від того, що з них знаходиться в основному вимірі, визначають основний розмір flex-контейнера або flex-елемента.

Поперечна вісь (cross axis) - Вісь, перпендикулярна головної осі. Вона простягається у поперечному вимірі.

Cross start та cross end - лінії, які визначають початкову та кінцеву сторони поперечної осі, щодо яких викладаються flex-елементи.

Поперечний розмір (cross size) - Ширина або висота flex-контейнера або flex-елементів, залежно від того, що знаходиться в поперечному вимірі, є їх поперечним розміром.

2. Flex-контейнер

Flex-контейнер встановлює новий гнучкий контекст форматування для його вмісту. Flex-контейнер не є блоковим контейнером, тому для дочірніх елементів не працюють такі CSS-властивості, як float, clear, vertical-align. Також, на flex-контейнер не впливають властивості column-*, що створюють колонки в тексті та псевдоелементи :: first-line і :: first-letter.

Модель flexbox-розмітки пов'язана з певним значенням CSS-властивості display батьківського html-елемента, що містить у собі дочірні блоки. Для керування елементами за допомогою цієї моделі потрібно встановити властивість display таким чином:

.flex-container < /*генерує flex-контейнер рівня блоку*/ display: -webkit-flex; display: flex; >.flex-container < /*генерує flex-контейнер рівня рядка*/ display: -webkit-inline-flex; display: inline-flex; >

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

Якщо батьківський блок містить текст або зображення без обгорток, вони стають анонімними flex-елементами. Текст вирівнюється верхнім краєм блока-контейнера, а висота зображення стає рівною висоті блоку, тобто. воно деформується.

3. Flex-елементи

Flex-елементи - блоки, що являють собою вміст flex-контейнера в потоці. Flex-контейнер встановлює новий контекст форматування для свого вмісту, який зумовлює такі особливості:

Для flex-елементів блокується їх значення властивості display. Значення display: inline-block; та display: table-cell; обчислюється у display: block; .
Порожній простір між елементами зникає: він не стає своїм власним flex-елементом, навіть якщо міжелементний текст обернутий на анонімний flex-елемент. Для вмісту анонімного flex-елемента неможливо встановити власні стилі, але він успадковуватиме їх (наприклад, параметри шрифту) від flex-контейнера.
Абсолютно позиціонований flex-елемент не бере участі в компонуванні гнучкого макету.
Поля margin сусідніх flex-елементів не хлопаються.
Відсоткові значення margin і padding обчислюються від внутрішнього розміру блоку, що містить їх.
margin: auto; розширюються, поглинаючи додатковий простір у відповідному вимірі.Їх можна використовувати для вирівнювання чи розсунення суміжних flex-елементів.
Автоматичний мінімальний розмір flex-елементів за умовчанням є мінімальним розміром вмісту, тобто min-width: auto; . Для контейнерів з прокручуванням автоматичний мінімальний розмір зазвичай дорівнює нулю.

4. Порядок відображення flex-елементів та орієнтація

Вміст flex-контейнера можна розкласти у будь-якому напрямку та в будь-якому порядку (перевпорядкування flex-елементів усередині контейнера впливає лише на візуальний рендеринг).

4.1. Напрямок головної осі: flex-direction

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

Властивість не успадковується.

flex-direction
row	Значення за замовчуванням зліва направо (в rtl справа наліво). Flex-елементи викладаються у рядок. Початок (main-start) та кінець (main-end) напряму головної осі відповідають початку (inline-start) та кінцю (inline-end) осі рядка (inline-axis).
row-reverse	Напрямок праворуч наліво (в rtl зліва направо). Flex-елементи викладаються в рядок щодо правого краю контейнера (rtl - лівого).
column	Напрямок зверху донизу. Flex-елементи викладаються у колонку.
column-reverse	Колонка з елементами у зворотному порядку, знизу догори.
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

flex-direction: row; flex-direction: row-reverse; flex-direction: column; flex-direction: column-reverse; flex-direction: inherit; flex-direction: initial;

4.2. Управління багаторядковістю flex-контейнера: flex-wrap

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

За замовчуванням flex-елементи укладаються в один рядок, уздовж головної осі. При переповненні вони виходитимуть за межі рамки flex-контейнера, що обмежує.

Властивість не успадковується.

flex-wrap
nowrap	Значення за промовчанням. Flex-елементи не переносяться, а розташовуються в одну лінію ліворуч (в rtl справа наліво).
wrap	Flex-елементи переносяться, розташовуючись у кілька горизонтальних рядів (якщо не поміщаються в один ряд) у напрямку зліва направо (rtl справа наліво).
wrap-reverse	Flex-елементи переносяться на нові лінії, розташовуючись у зворотному порядку ліворуч-праворуч, при цьому перенесення відбувається знизу вгору.
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

flex-wrap: nowrap; flex-wrap: wrap; flex-wrap: wrap-reverse; flex-wrap: inherit; flex-wrap: initial;

4.3. Короткий запис напрямку та багаторядності: flex-flow

Властивість дозволяє визначити напрямки головної та поперечної осей, а також можливість перенесення flex-елементів за необхідності на кілька рядків. Є скороченим записом властивостей flex-direction і flex-wrap . Значення за промовчанням flex-flow: row nowrap; .

Властивість не успадковується.

flex-flow
напрямок	Вказує напрямок головної осі. Значення за промовчанням row .
багаторядковість	Задає багаторядковість поперечної осі. Значення за замовчуванням nowrap.
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

flex-flow: row; flex-flow: row-reverse; flex-flow: column; flex-flow: column-reverse; flex-flow: nowrap; flex-flow: wrap; flex-flow: wrap-reverse; flex-flow: row nowrap; flex-flow: column wrap; flex-flow: column-reverse wrap-reverse; flex-flow: inherit; flex-flow: initial;

4.4. Порядок відображення flex-елементів: order

Властивість визначає порядок, в якому flex-елементи відображаються та розташовуються усередині flex-контейнера. Застосовується до flex-елементів.

Властивість не успадковується.

Спочатку всі flex-елементи мають order: 0; . При вказівці значення -1 для елемента він переміщається на початок терміни, значення 1 - в кінець. Якщо кілька flex-елементів мають однакове значення order , вони відображатимуться відповідно до вихідного порядку.

order
число	Властивість визначається цілим числом, що відповідає за порядок відображення flex-елементів. Значення за промовчанням 0 .
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

order: 2; order: -1; order: inherit; order: initial;

5. Гнучкість flex-елементів

Визначальним аспектом гнучкого макета є можливість «згинати» flex-елементи, змінюючи їх ширину/висоту (залежно від того, який розмір знаходиться на головній осі), щоб заповнити доступний простір в основному вимірі. Це робиться за допомогою властивості flex. Flex-контейнер розподіляє вільний простір між своїми дочірніми елементами (пропорційно їхньому коефіцієнту flex-grow ) для заповнення контейнера або стискає їх (пропорційно їхньому коефіцієнту flex-shrink ), щоб запобігти переповненню.

Flex-елемент буде повністю «негнучким», якщо його значення flex-grow і flex-shrink рівні нулю, і «гнучкий» в іншому випадку.

5.1. Завдання гнучких розмірів однією властивістю: flex

Властивість є скороченим записом властивостей flex-grow, flex-shrink та flex-basis. За замовчуванням: flex: 0 1 auto; . Можна вказувати як одне, і всі три значення властивостей.

Властивість не успадковується.

W3C рекомендує використовувати скорочений запис, оскільки він правильно скидає будь-які невказані компоненти, щоб підлаштуватися під типове використання.

flex
коефіцієнт розтягування	Коефіцієнт збільшення ширини flex-елемента щодо інших flex-елементів.
коефіцієнт звуження	Коефіцієнт зменшення ширини flex-елементів щодо інших flex-елементів.
базова ширина	Базова ширина flex-елемента.
auto	Еквівалентно flex: 1 1 auto; .
none	Еквівалентно flex: 0 0 auto; .
initial	Встановлює значення властивості значення за замовчуванням. Еквівалентно flex: 0 1 auto; .
inherit	Наслідує значення властивості від батьківського елемента.

flex: none; /* Одне значення число без одиниць: flex-grow */ flex: 2; /* Одне значення, ширина/висота: flex-basis */ flex: 10em; flex: 30px; flex: auto; flex: content; /* Два значення: flex-grow | flex-basis */flex: 1 30px; /* Два значення: flex-grow | flex-shrink */flex: 2 2; /* Три значення: flex-grow | flex-shrink | flex-basis */flex: 2 2 10%; flex: inherit; flex: initial;

5.2. Коефіцієнт зростання: flex-grow

Властивість визначає коефіцієнт зростання одного flex-елемента щодо інших flex-елементів у flex-контейнері при розподілі позитивного вільного простору. Якщо сума значень flex-grow flex-елементів у рядку менше 1, вони займають менше ніж 100% вільного простору.

Властивість не успадковується.

flex-grow
число	Позитивне ціле чи дробове число, що встановлює коефіцієнт зростання flex-елемента. Значення за промовчанням 0 .
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

flex-grow: 3; flex-grow: 0.6; flex-grow: inherit; flex-grow: initial;

5.3. Коефіцієнт стиснення: flex-shrink

Властивість вказує коефіцієнт стиснення flex-елемента щодо інших flex-елементів під час розподілу негативного вільного простору.Помножується на базовий розмір flex-basis. Негативний простір розподіляється пропорційно до того, наскільки елемент може стиснутися, тому, наприклад, маленький flex-елемент не зменшиться до нуля, поки не буде помітно зменшений flex-елемент більшого розміру.

Властивість не успадковується.

flex-shrink
число	Позитивне ціле чи дробове число, що встановлює коефіцієнт зменшення flex-елемента. Значення за промовчанням 1 .
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

flex-shrink: 2; flex-shrink: 0.6; flex-shrink: inherit; flex-shrink: initial;

5.4. Базовий розмір: flex-basis

Властивість встановлює початковий основний розмір flex-елемента до розподілу вільного простору відповідно до коефіцієнтів гнучкості. Для всіх значень, крім auto і content , базовий гнучкий розмір визначається так само, як width у горизонтальних режимах запису. Відсоткові значення визначаються щодо розміру flex-контейнера, а якщо розмір не заданий, значенням для flex-basis, що використовується, є розміри його вмісту.

Властивість не успадковується.

flex-basis
auto	Значення за промовчанням. Елемент отримує базовий розмір, що відповідає розміру його вмісту (якщо не заданий явно).
content	Визначає базовий розмір, залежно від вмісту flex-елемента.
довжина	Базовий розмір визначається так само, як для ширини та висоти. Визначається в одиницях довжини.
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

flex-basis: 10em; flex-basis: 3px; flex-basis: auto; flex-basis: content; flex-basis: inherit; flex-basis: initial;

6. Вирівнювання

6.1. Вирівнювання по осі: justify-content

Властивість вирівнює flex-елементи по головній осі flex-контейнера, розподіляючи вільний простір, незайнятий flex-елементами. значень margin та flex-grow . будь-які елементи мають ненульове значення flex-grow або margin: auto; властивість не буде впливати.

Властивість не успадковується.

justify-content
flex-start	Значення за умовчанням Flex-елементи викладаються в напрямку, що йде від початку flex-контейнера.
flex-end	Flex-елементи розміщуються наприкінці flex-контейнера.
center	Flex-елементи вирівнюються центром flex-контейнера.
space-between	Flex-елементи рівномірно розподіляються по лінії. Перший flex-елемент міститься врівень з краєм початкової лінії, останній flex-елемент — нарівні з краєм кінцевої лінії, а решта flex-елементів на лінії розподіляється так, щоб відстань між будь-якими двома сусідніми елементами була однаковою. Якщо вільний простір, що залишився, негативно або в рядку присутній тільки один flex-елемент, це значення ідентичне параметру flex-start.
space-around	Flex-елементи на лінії розподіляються так, щоб відстань між будь-якими двома суміжними flex-елементами була однаковою, а відстань між першим/останнім flex-елементами та краями flex-контейнера становила половину від відстані між flex-елементами.
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

9. Вирівнювання елементів та розподіл вільного простору за допомогою властивості justify-content

justify-content: center; justify-content: flex-start; justify-content: flex-end; justify-content: space-between; justify-content: space-around; justify-content: stretch; justify-content: inherit; justify-content: initial;

6.2. Вирівнювання по поперечній осі: align-items та align-self

Flex-елементи можна вирівнювати по поперечній осі поточного рядка flex-контейнера. align-items встановлює вирівнювання всіх елементів flex-контейнера, включаючи анонімні flex-елементи. align-self дозволяє перевизначити це вирівнювання для окремих flex-елементів. Якщо будь-яке з поперечних margin flex-елемента має значення auto, align-self не має жодного впливу.

6.2.1. align-items

Властивість вирівнює flex-елементи, у тому числі і анонімні flex-елементи поперечної осі.

Властивість не успадковується.

align-items
flex-start	Верхній край flex-елемента міститься впритул з flex-лінією (або на відстані, з урахуванням заданих полів margin та рамок border елемента), що проходить через початок поперечної осі.
flex-end	Нижній край flex-елемента міститься впритул з flex-лінією (або на відстані, з урахуванням заданих полів margin та рамок border елемента), що проходить через кінець поперечної осі.
center	Поля flex-елемента центрується по поперечній осі в межах flex-лінії.
baseline	Базові лінії всіх flex-елементів, що у вирівнюванні, збігаються.
stretch	Якщо поперечний розмір flex-елемента обчислюється як auto і жодне з поперечних значень margin не дорівнює auto, елемент розтягується. Значення за промовчанням.
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

align-items: stretch; align-items: center; align-items: flex-start; align-items: flex-end; align-items: baseline; align-items: inherit; align-items: initial;

6.2.2. align-self

Властивість відповідає за вирівнювання окремо взятого flex-елемента за висотою flex-контейнера. Перевизначає вирівнювання, задане align-items.

Властивість не успадковується.

align-self
auto	Значення за промовчанням. Flex-елемент використовує вирівнювання, вказане у властивості align-items flex-контейнера.
flex-start	Верхній край flex-елемента міститься впритул з flex-лінією (або на відстані, з урахуванням заданих полів margin та рамок border елемента), що проходить через початок поперечної осі.
flex-end	Нижній край flex-елемента міститься впритул з flex-лінією (або на відстані, з урахуванням заданих полів margin та рамок border елемента), що проходить через кінець поперечної осі.
center	Поля flex-елемента центрується по поперечній осі в межах flex-лінії.
baseline	Flex-елемент вирівнюється за базовою лінією.
stretch	Якщо поперечний розмір flex-елемента обчислюється як auto і жодне з поперечних значень margin не дорівнює auto, елемент розтягується. Значення за промовчанням.
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

align-self: auto; align-self: center; align-self: flex-start; align-self: flex-end; align-self: baseline; align-self: stretch; align-self: inherit; align-self: initial;

6.3. Вирівнювання рядків flex-контейнера: align-content

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

Властивість не успадковується.

align-content
flex-start	Рядки укладаються до початку flex-контейнера.Край першого рядка міститься впритул до краю flex-контейнера, кожен наступний — впритул до попереднього рядка.
flex-end	Рядки укладаються у напрямку до кінця flex-контейнера. Край останнього рядка міститься впритул до краю flex-контейнера, кожен попередній - впритул до наступного рядка.
center	Рядки укладаються в напрямку до центру flex-контейнера.
space-between	Рядки рівномірно розподілені в flex-контейнері Якщо вільний простір, що залишився, негативно або в flex-контейнері є тільки одна flex-лінія, це значення ідентично flex-start . рядки - впритул до кінцевого краю вмісту flex-контейнера Інші рядки розподілені так, щоб відстань між будь-якими двома сусідніми рядками була однаковою.
space-around	Рядки рівномірно розподілені в flex-контейнері з половинним пробілом на обох кінцях. рядками та краями вмісту flex-контейнера становило половину відстані між рядками.
stretch	Значення за умовчанням Рядки flex-елементів рівномірно розтягуються, заповнюючи весь доступний простір.Якщо вільний простір, що залишився, негативно, це значення ідентично flex-start . В іншому випадку вільний простір буде розділений порівну між усіма рядками, збільшуючи їх поперечний розмір.
initial	Встановлює значення властивості значення за замовчуванням.
inherit	Наслідує значення властивості від батьківського елемента.

align-content: center; align-content: flex-start; align-content: flex-end; align-content: space-between; align-content: space-around; align-content: stretch; align-content: inherit; align-content: initial;