Flexbox
Раскладка по одной оси: justify, align, gap, flex: 1 и рецепты на каждый день.
Обновлено
Что такое Flexbox
Flexbox — система раскладки по одной оси: вы выстраиваете детей элемента в строку или колонку и управляете расстоянием между ними и выравниванием. Включается на родителе:
.toolbar { display: flex; }С этого момента прямые потомки становятся flex-элементами.
Две оси
flex-direction: row (по умолчанию) |
flex-direction: column |
|
|---|---|---|
| Главная ось | горизонтальная → | вертикальная ↓ |
| Поперечная ось | вертикальная | горизонтальная |
Всё отсчитывается от осей, а не от «лево/верх»:
justify-content— выравнивание по главной оси.align-items— выравнивание по поперечной оси.
Свойства родителя
| Свойство | Частые значения | Эффект |
|---|---|---|
flex-direction |
row, column |
направление |
justify-content |
flex-start, center, space-between, flex-end |
распределяет по главной оси |
align-items |
stretch (по умолчанию), center, flex-start, baseline |
выравнивает по поперечной оси |
gap |
1rem |
расстояние между детьми |
flex-wrap |
nowrap (по умолчанию), wrap |
перенос на следующую строку, если не помещаются |
Свойства детей
.item { flex: 1; } /* поровну делят оставшееся место */
.search { flex: 1; min-width: 0; } /* растёт, но может и сжиматься */
.logo { flex-shrink: 0; } /* никогда не сжимается */
.last { margin-left: auto; } /* прижимает элемент к концу */flex — сокращение для flex-grow flex-shrink flex-basis:
| Значение | Означает | Когда |
|---|---|---|
flex: 1 |
растёт и сжимается, основа 0 | равные колонки, поле на всю строку |
flex: none |
фиксированный размер | иконка, аватар, кнопка |
flex: auto |
растёт, начиная с размера содержимого | вкладки разной ширины |
Рецепты на каждый день
/* идеальное центрирование */
.center { display: flex; justify-content: center; align-items: center; }
/* шапка: логотип слева, меню справа */
.header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
/* карточка с футером, прижатым к низу */
.card { display: flex; flex-direction: column; }
.card footer { margin-top: auto; }Flexbox или Grid?
| Flexbox | Grid |
|---|---|
| одно измерение — строка ИЛИ колонка | два измерения — строки И колонки |
| размер диктует содержимое | размер диктует раскладка |
| навбар, тулбар, кнопки, центрирование | страницы, галереи, дашборды, выровненные формы |
Часто их сочетают: grid для страницы, flex внутри карточек.
Классическая ошибка
Длинный текст во flex-элементе, который не сжимается: у детей по умолчанию min-width: auto. Решение: min-width: 0 на элементе (или overflow: hidden).
Коротко
display: flexна родителе; дети выстраиваются по одной оси.justify-content= главная ось,align-items= поперечная.gapдля отступов,flex: 1, чтобы заполнить место.