Page 62 - 6108
P. 62
flex-end – рядки flex-елементів вирівнюються по лівому краю flex-
контейнера щодо нижнього краю блоку-контейнера.
center – рядки flex-елементів вирівнюються по висоті по середині flex-
контейнера щодо його лівого краю.
space-between – рядки flex-елементів вирівнюються по висоті по
середині flex-контейнера щодо його лівого краю. Вільний простір
розподіляється між ними. Перший ряд flex-елементів притискається до початку
flex-контейнера, останній ряд – до нижнього краю.
space-around – рядки flex-елементів рівномірно розподіляються по
висоті, вільний простір додається зверху і знизу рядки.
Властивості flex-елементів
Властивість order визначає порядок, в якому flex-елементи
відображаються всередині flex-контейнера.
order: число;
число – властивість задається цілим числом, що відповідає за порядок
відображення flex-елементів. Значення за замовчуванням 0. В цьому випадку
вони слідують один за одним у міру додавання у flex-контейнер. Найперший
flex-елемент за замовчуванням розташований зліва.
Значення -1 ставить елемент на початок рядка, а 1 в кінець рядка.
Властивість flex-basis дозволяє задати базову ширину flex-елемента,
щодо якої буде відбуватися розтягнення flex-grow або звуження flex-
shrink елемента.
flex-basis: auto | число | initial | inherit
auto – значення за замовчуванням. Елемент отримує базову ширину,
відповідну ширині контенту всередині нього, коли її не вказано явно.
число – ширина елемента задається в px,%, em і інших одиницях виміру.
Властивість flex-grow визначає коефіцієнт збільшення ширини flex-
елемента щодо інших flex-елементів. Властивість не успадковується.
flex-grow: число | initial | inherit
число – позитивне ціле або дробове число, яке встановлює коефіцієнт
збільшення flex-елемента. Значення за замовчуванням 0.
Властивість flex-shrink вказує коефіцієнт зменшення ширини flex-
елемента щодо інших flex-елементів. Працює тільки якщо для елемента задана
ширина за допомогою властивості flex-basis або width. Властивість не
успадковується.
flex-shrink: число | initial | inherit
число – позитивне ціле або дробове число, яке встановлює коефіцієнт
зменшення flex-елемента. Значення за замовчуванням 1.
Властивість flex є скороченим записом властивостей flex-grow, flex-
shrink і flex-basis.
flex: grow | shrink | basis
Значення за замовчуванням:
flex: 0 1 auto;