📋 Flexbox Cheatsheet

Все свойства CSS Flexbox в одном месте с визуальными примерами

📚 Уроки 🎮 Практика 📋 Шпаргалка 🎯 Задачи 🏆 Достижения
🔍 15 свойств
🔍
Ничего не найдено. Попробуйте другой запрос.

📦 Свойства контейнера

display
container
Определяет тип контейнера. Значение flex делает элемент блочным flex-контейнером, inline-flex — строчным.
flex
Блочный flex-контейнер
display: flex;
inline-flex
Строчный flex-контейнер
display: inline-flex;
flex-direction
container
Задаёт направление главной оси. Определяет, как элементы размещаются во flex-контейнере.
row
Слева направо (по умолчанию)
1
2
3
flex-direction: row;
row-reverse
Справа налево
1
2
3
flex-direction: row-reverse;
column
Сверху вниз
1
2
3
flex-direction: column;
column-reverse
Снизу вверх
1
2
3
flex-direction: column-reverse;
flex-wrap
container
Управляет переносом элементов на новую строку, если они не помещаются в одну строку.
nowrap
Все в одну строку (по умолчанию)
1
2
3
4
5
flex-wrap: nowrap;
wrap
Перенос на новую строку
1
2
3
4
5
6
flex-wrap: wrap;
wrap-reverse
Перенос в обратном порядке
flex-wrap: wrap-reverse;
flex-flow
container
Сокращение для flex-direction и flex-wrap. Значения по умолчанию: row nowrap.
Синтаксис
direction + wrap
flex-flow: row wrap;
justify-content
container
Выравнивание элементов вдоль главной оси. Распределяет свободное пространство между/вокруг элементов.
flex-start
К началу строки
1
2
3
justify-content: flex-start;
flex-end
К концу строки
1
2
3
justify-content: flex-end;
center
По центру
1
2
3
justify-content: center;
space-between
Первый в начале, последний в конце, остальные равномерно
1
2
3
justify-content: space-between;
space-around
Равные отступы вокруг каждого элемента
1
2
3
justify-content: space-around;
space-evenly
Равные отступы между и по краям
1
2
3
justify-content: space-evenly;
align-items
container
Выравнивание элементов вдоль поперечной оси. Работает с отдельными строками.
stretch
Растянуть на всю высоту (по умолчанию)
1
2
3
align-items: stretch;
flex-start
К началу поперечной оси
1
2
3
align-items: flex-start;
flex-end
К концу поперечной оси
1
2
3
align-items: flex-end;
center
По центру поперечной оси
1
2
3
align-items: center;
baseline
По базовой линии текста
A
b
C
align-items: baseline;
align-content
container
Выравнивание СТРОК внутри контейнера при наличии свободного пространства. Работает только с flex-wrap: wrap.
stretch
Растянуть строки (по умолчанию)
align-content: stretch;
flex-start
Строки к началу
align-content: flex-start;
flex-end
Строки к концу
align-content: flex-end;
center
Строки по центру
align-content: center;
space-between
Равномерно между строками
align-content: space-between;
space-around
Равные отступы вокруг строк
align-content: space-around;
gap / row-gap / column-gap
container
Управляет расстоянием между flex-элементами. gap — сокращение для row-gap и column-gap.
gap
Одинаковый отступ между всеми элементами
gap: 1rem;
gap (два значения)
row-gap column-gap
gap: 1rem 2rem;
row-gap
Отступ между строками
row-gap: 1rem;
column-gap
Отступ между колонками
column-gap: 2rem;

🎯 Свойства элементов

order
item
Управляет порядком элементов. Элементы с меньшим значением располагаются первыми. По умолчанию 0.
order: <число>
Целое число, может быть отрицательным
.item { order: 2; }
flex-grow
item
Определяет способность элемента расти при наличии свободного пространства. Коэффициент пропорции.
flex-grow: 0
Не расти (по умолчанию)
flex-grow: 0;
flex-grow: 1
Растянуть на всё доступное пространство
flex-grow: 1;
flex-grow: 2
В 2 раза больше, чем у элемента с 1
flex-grow: 2;
flex-shrink
item
Определяет способность элемента сжиматься при нехватке места. По умолчанию 1.
flex-shrink: 0
Не сжиматься
flex-shrink: 0;
flex-shrink: 1
Сжиматься при необходимости (по умолчанию)
flex-shrink: 1;
flex-basis
item
Задаёт начальный размер элемента до распределения свободного пространства. По умолчанию auto.
auto
Размер по содержимому (по умолчанию)
flex-basis: auto;
0
Игнорировать содержимое
flex-basis: 0;
<размер>
px, %, em, rem и т.д.
flex-basis: 200px;
flex
item
Сокращение для flex-grow, flex-shrink и flex-basis. По умолчанию: 0 1 auto.
flex: auto
1 1 auto
flex: auto;
flex: initial
0 1 auto (по умолчанию)
flex: initial;
flex: none
0 0 auto (не растёт и не сжимается)
flex: none;
flex: 1
1 1 0 (растянуть равномерно)
flex: 1;
flex: 1 1 200px
grow shrink basis
flex: 1 1 200px;
align-self
item
Позволяет отдельному элементу переопределить align-items контейнера.
auto
Наследовать от контейнера (по умолчанию)
align-self: auto;
flex-start
К началу поперечной оси
align-self: flex-start;
flex-end
К концу поперечной оси
align-self: flex-end;
center
По центру
align-self: center;
baseline
По базовой линии
align-self: baseline;
stretch
Растянуть
align-self: stretch;