Шпаргалка по макетам CSS Flexbox
На этой странице представлена визуальная шпаргалка по макетам CSS Flexbox, включая свойства контейнера, свойства элементов и распространенные примеры верстки.
Свойства контейнера
| Свойство | Значение | Описание |
|---|---|---|
display |
flex |
Включает гибкий макет |
flex-direction |
row |
Главная ось горизонтальна, начало координат слева |
row-reverse |
Главная ось горизонтальна, начало координат справа | |
column |
Главная ось вертикальна, начало координат сверху | |
column-reverse |
Главная ось вертикальна, начало координат снизу | |
flex-wrap |
nowrap |
Значение по умолчанию, элементы располагаются в одну линию |
wrap |
Переносить элементы на новую строку | |
wrap-reverse |
Переносить элементы на новую строку в обратном порядке | |
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 |
Выравнивание поперечной оси для нескольких строк: распределение с равными интервалами между строками | |
space-around |
Выравнивание поперечной оси для нескольких строк: распределение с равными интервалами вокруг строк | |
stretch |
Значение по умолчанию, выравнивание поперечной оси для нескольких строк: растягивать, чтобы заполнить оставшееся пространство |
Свойства элементов (Items)
| Свойство | Значение | Описание |
|---|---|---|
flex-grow |
number |
Определяет способность элемента увеличиваться, по умолчанию 0 (не увеличивается) |
flex-shrink |
number |
Определяет способность элемента уменьшаться, по умолчанию 1 |
flex-basis |
auto |
Определяет размер элемента по умолчанию перед распределением оставшегося пространства |
align-self |
auto |
Позволяет переопределить способ выравнивания для отдельного элемента (переопределяет align-items) |
flex-start |
Элемент располагается в начале контейнера | |
flex-end |
Элемент располагается в конце контейнера | |
center |
Элемент располагается по центру | |
baseline |
Базовая линия элемента совпадает с базовой линией контейнера | |
stretch |
Элемент растягивается, заполняя контейнер (если у контейнера есть высота) |
Распространенные примеры макетов
| Макет | Свойства контейнера | Свойства элементов |
|---|---|---|
| Горизонтальная навигация | display: flex;justify-content: space-around; |
|
| Вертикальный сайдбар | display: flex;flex-direction: column;justify-content: flex-start; |
|
| Сеточный макет | display: flex;flex-wrap: wrap;justify-content: space-between; |
flex: 1 0 21%; |
| Карточный макет | display: flex;flex-wrap: wrap;justify-content: space-around; |
flex: 0 1 calc(33.333% - 10px); |