Шпаргалка по CSS Flexbox
Модель макета Flexbox (Flexible Box) предоставляет более эффективный способ выравнивания и распределения элементов внутри контейнера, даже если их размер неизвестен или динамичен.
Flex-контейнер
Set on parent: display: flex; or display: inline-flex;
| Свойство | Описание | Общие значения |
|---|---|---|
flex-direction |
Направление главной оси | row, row-reverse, column, column-reverse |
flex-wrap |
Режим переноса | nowrap, wrap, wrap-reverse |
flex-flow |
Краткая запись для направления и переноса | row wrap |
justify-content |
Выравнивание по главной оси | flex-start, flex-end, center, space-between, space-around |
align-items |
Выравнивание по поперечной оси | flex-start, flex-end, center, baseline, stretch |
align-content |
Выравнивание многострочного контента | flex-start, flex-end, center, space-between, stretch |
Flex-элементы
Set on children:
| Свойство | Описание | По умолчанию |
|---|---|---|
order |
Порядок отрисовки (меньшие значения — раньше) | 0 |
flex-grow |
Коэффициент растяжения (при наличии места) | 0 |
flex-shrink |
Коэффициент сжатия (при нехватке места) | 1 |
flex-basis |
Базовый размер до распределения места | auto |
flex |
Краткая запись для grow, shrink и basis | 0 1 auto |
align-self |
Позволяет отдельному элементу иметь иное выравнивание | auto |
Основные концепции
- Главная ось (Main Axis): По умолчанию горизонтальная, определяется через flex-direction.
- Поперечная ось (Cross Axis): Направление, перпендикулярное главной оси.
Примеры использования
Центрирование по горизонтали и вертикали
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}Равномерное распределение по ширине
.item {
flex: 1; /* Равномерное занятие оставшегося места */
}Выравнивание по краям (Space Between)
.navbar {
display: flex;
justify-content: space-between;
}