Загрузка...

Flex-элементы в CSS

Flex Container управляет родителем. Flex-элементы отвечают на другой вопрос: как каждый ребёнок растёт, сжимается и задаёт стартовый размер в этом ряду или столбце? Освойте basis, grow и shrink, прежде чем гнаться за адаптивными паттернами flex.

Набор инструментов flex-элементов

📊 Flex-элементы одним взглядом

Свойство	Повседневная роль
`flex-basis`	Стартовый размер по главной оси до распределения свободного места
`flex-grow`	Сколько оставшегося места забирает этот элемент (безразмерный коэффициент)
`flex-shrink`	Насколько охотно элемент сжимается, когда места мало
`flex`	Сокращение для grow, shrink и basis
`align-self`	Переопределяет `align-items` контейнера для одного элемента
`order`	Меняет визуальный порядок (используйте редко — берегите DOM и доступность)

Считайте basis предпочтительной стартовой длиной элемента на главной оси. Затем grow и shrink договариваются об оставшемся свободном или недостающем месте.

flex-grow — забрать оставшееся место

Коэффициент 1 позволяет элементу расшириться в свободное место. Коэффициенты соседей соревнуются: два элемента с flex-grow: 1 делят остаток поровну.

Growing main column

css

.layout {
display: flex;
gap: 1rem;
}

.layout__main {
flex-grow: 1;
}

.layout__aside {
flex-grow: 0;
width: 14rem;
}

flex-basis — начать с размера

flex-basis задаёт стартовый размер по главной оси до расчёта grow/shrink. Для алгоритма flex предпочитайте basis; width/height по-прежнему важны, но родная точка старта flex — именно basis.

Sidebar with basis

css

.layout__aside {
flex-basis: 14rem;
flex-grow: 0;
flex-shrink: 0;
}

flex-shrink — вернуть место

Когда ряд слишком тесен, коэффициенты shrink решают, кто сожмётся. flex-shrink: 0 защищает иконки или фиксированные рельсы от сплющивания.

Protect from squash

css

.icon-rail {
flex-shrink: 0;
flex-basis: 3rem;
}

Сокращение flex

flex: grow shrink basis упаковывает тройку. Спокойные значения по умолчанию: flex: 1 (расти, разрешить сжатие, basis auto) для заполняющего ребёнка; flex: 0 0 auto для жёсткого чипа.

Flex shorthand

css

.card__body {
flex: 1 1 auto;
}

.card__badge {
flex: 0 0 auto;
}

align-self — один элемент, другое поперечное выравнивание

Переопределите align-items контейнера для одного ребёнка. Полезно, когда один бейдж должен прилипнуть к началу, а соседи остаться по центру.

Align-self override

css

.row {
display: flex;
align-items: center;
gap: 0.75rem;
}

.row .note {
align-self: flex-start;
}

Спокойная привычка для flex-элемента

Сначала basis под нужный размер, затем коэффициенты grow/shrink, затем сокращение для порядка. Используйте align-self умеренно. Избегайте трюков с order, которые ломают порядок клавиатуры и скринридера — а паттерны flex с media query оставьте уроку Flex Responsive.

Named item roles

css

.cluster__main {
flex: 1 1 auto;
}

.cluster__meta {
flex: 0 0 auto;
align-self: center;
}

Попробуйте сами

Сделайте ряд main + aside; дайте main flex-grow: 1.
Задайте aside через flex-basis: 14rem и flex-shrink: 0.
Защитите иконку с flex-shrink: 0.
Перепишите grow/shrink/basis сокращением flex.
Переопределите поперечное выравнивание одного ребёнка через align-self.

Частые ошибки

Ставить flex-grow на контейнер вместо элемента
Путать width с flex-basis и удивляться, почему расчёт flex не сходится
Менять порядок через order и ломать tab/исходный порядок
Давать логотипам сплющиваться, потому что shrink остался по умолчанию
Считать этот урок модулем Flex Responsive

Итог

Flex-элементы управляют ростом, сжатием и стартовым basis
flex-grow делит свободное место; flex-shrink делит сжатие
flex-basis — стартовый размер flex на главной оси
Сокращение flex и align-self уточняют отдельных детей
Адаптивные паттерны flex — дальше; order используйте осторожно

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓

Вопросы

🎯

70%

Для Прохождения

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

Внимательно прочитайте каждый вопрос
Выберите лучший ответ на каждый вопрос
Вы можете пересдавать тест столько раз, сколько захотите
Ваш прогресс будет показан вверху

Язык