Все распространённые свойства 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 контейнера для одного элемента.