Усі поширені властивості flexbox, згруповані за місцем застосування: контейнер та елемент. Кожен рядок поєднує властивість із її типовими значеннями й описує, що вона робить.
Flexbox розташовує елементи в одному вимірі: у рядок або в стовпчик. Задайте батьківському елементу display: flex — і він стане flex-контейнером, а його прямі нащадки стануть flex-елементами. Властивості контейнера керують розподілом уздовж головної та поперечної осі; властивості елемента визначають, як окремий елемент росте, стискається чи вирівнюється. Обирайте flexbox для одновимірних смуг, рядків і центрування.
Довідкова таблиця · 13 записи
CSS FlexboxExplained
13 of 13 rows
Контейнер
flex | inline-flex
Перетворює елемент на flex-контейнер.
row | column | row-reverse | column-reverse
Задає головну вісь, уздовж якої розташовуються елементи.
flex-start | center | space-between | space-around | space-evenly
Розподіляє елементи вздовж головної осі.
stretch | center | flex-start | flex-end | baseline
Вирівнює елементи вздовж поперечної осі.
flex-start | center | stretch | space-between
Вирівнює перенесені рядки, коли на поперечній осі є зайвий простір.
nowrap | wrap | wrap-reverse
Дозволяє елементам переноситися на нові рядки замість стискування.
0.5rem | 8px 16px
Проміжок між елементами, по горизонталі та вертикалі.
Елемент
0 | 1 | 2
Скільки вільного місця елемент забирає відносно сусідніх.
0 | 1
Наскільки елемент стискається, коли місця не вистачає.
auto | 200px | 50%
Початковий розмір до розподілу вільного місця.
1 | 1 0 auto | 0 0 200px
Скорочення від grow shrink basis.
auto | center | flex-start | flex-end | stretch
Перевизначає align-items контейнера для одного елемента.
0 | -1 | 2
Змінює порядок елемента, не змінюючи вихідний код.