Page 60 - 6108

блокові і рядкові дочірні елементи поводяться однаково, тобто ширина блоків
дорівнює ширині їх вмісту з урахуванням внутрішніх полів і рамок елемента.
Якщо батьківський блок містить текст або зображення без обгорток, вони
стають анонімними flex-елементами. Текст вирівнюється по верхньому краю
блоку-контейнера, а висота зображення стає рівною висоті блоку, тобто воно
деформується.
Властивість justify-content вирівнює flex-елементи по ширині flex-
контейнера, розподіляючи вільний простір, не зайнятий flex-елементами. Для
вирівнювання елементів по вертикалі використовується властивість align-
content. Властивість не успадковується.

justify-content = flex-start | flex-start | center |
space-between | space-around | initial | inherit

flex-start – значення по замовчуванні. Flex-елементи
позиціонуються від початку flex-контейнеру.
flex-start – Flex-елементи позиціонуються відносно правої границі
flex-контейнеру.
center – Flex-елементы вирівнюються по центру flex-контейнеру.
space-between – Flex-елементи вирівнюються по головній осі, вільне
місце між ними розподіляється наступним чином: перший блок розташовується
на початку flex-контейнера, останній блок - в кінці, всі інші блоки рівномірно
розподілені в просторі, що залишився, а вільний простір рівномірно
розподіляється між елементами.
space-around – Flex-елементи вирівнюються по головній осі, а вільне
місце ділиться порівну, додаючи відступи справа і зліва.
initial – Встановлює значення властивості в значення за
замовчуванням.
inherit – Успадковує значення властивості від батьківського
елемента.

Властивість align-items вирівнює flex-елементи, в тому числі і
анонімні flex-елементи по перпендикулярній осі (по висоті). Чи не
успадковується.
align-items = stretch | flex-start | flex-end | center |
baseline | initial | inherit

stretch – значення за замовчуванням. Flex-елементи розтягуються,
займаючи весь простір по висоті.
flex-start – Flex-елементи вирівнюються по лівому краю flex-
контейнера щодо верхнього краю блоку-контейнера.
flex-end – Flex-елементи вирівнюються по лівому краю flex-
контейнера щодо нижнього краю блоку-контейнера.
center – Flex-елементи вирівнюються по центру flex-контейнера.
baseline – Flex-елементи вирівнюються по базовій лінії.

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