Page 61 - 6108

рядки або вертикально, як колонки. Головна вісь за замовчуванням йде зліва
направо. Поперечна - зверху вниз. Властивість не успадковується.
flex-direction = row | row-reverse | column | column-
reverse | initial | inherit

row – значення за замовчуванням, зліва направо (в rtl справа наліво). Flex-
елементи викладаються в рядок. Початок (main-start) і кінець (main-end)
напрямки головної осі відповідають початку (inline-start) і кінця (inline-
end) інлайн осі (inline-axis).

row-reverse – напрямок справа наліво (в rtl зліва направо). Flex-
елементи викладаються в рядок щодо правого краю контейнера (в rtl - лівого).
column – напрямок зверху вниз. Flex-елементи викладаються в колонку.
column-reverse – колонка з елементами в зворотному порядку, від низу
до верху.
Властивість flex-wrap управляє тим, як flex-контейнер буде викладати
flex-елементи – в один рядок або в кілька, і напрямком, в якому будуть
укладатися нові рядки. За замовчуванням flex-елементи укладаються в один
рядок. При переповненні контейнера їх вміст буде виходити за межі flex-
елементів.

flex-wrap = nowrap | wrap | wrap-reverse | initial | inherit

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

flex-flow: row nowrap

Властивість align-content вирівнює рядки flex-елементів по вертикалі
у flex-контейнері, дозволяючи управляти вільним простором. Властивість
працює тільки в разі, якщо дозволене перенесення рядків і вказано напрямок
flex-flow: row|row-reverse|column|column-reverse
wrap|wrap-reverse;
і висота flex-контейнера.

align-content = stretch | flex-start | flex-end | center

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