Загрузка...

Адаптивный Flex в CSS

Урок Flex Items задавал размер каждого ребёнка. Адаптивный Flex задаёт следующий вопрос: когда viewport сужается, как эта flex-строка должна переноситься, складываться в столбец или менять направление? Изучите несколько спокойных паттернов media query — глубокие модули Responsive Design и Media Queries будут позже.

Набор инструментов адаптивного flex

📊 Адаптивный flex одним взглядом

Инструмент	Повседневная роль
`flex-wrap`	Переносит элементы на новую строку, когда ряд слишком узкий
`flex-direction`	Переключает `row` ↔ `column` на breakpoint, чтобы сложить секции
Media query	Применяет новое flex-правило только при совпадении viewport
`flex-basis` / `min-width`	Подсказывает, когда карточки переносятся или остаются рядом
`gap`	Сохраняет честные отступы при переносе строк
Избегать `order` для вёрстки	Держите порядок DOM для клавиатуры и скринридеров

Начните с читаемой desktop- (или mobile-first) flex-основы. На одном ясном breakpoint меняйте только то, что нужно — wrap, направление или basis — не все свойства сразу.

flex-wrap — дайте строке дышать

Когда карточки на широких экранах должны стоять в ряд и переноситься, а не бесконечно сжиматься, включите wrap и дайте каждой карточке разумный basis.

Wrapping card row

css

.cards {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.cards__item {
flex: 1 1 14rem;
min-width: 12rem;
}

Смена направления на breakpoint

Классический паттерн: рядом на широких viewport, столбец на узких. Меняйте flex-direction внутри media query — тот же HTML.

Stack on small screens

css

.shell {
display: flex;
flex-direction: row;
gap: 1.25rem;
}

@media (max-width: 40rem) {
.shell {
flex-direction: column;
}
}

Basis и min-width для перестройки

Сочетайте wrap с flex-basis или min-width, чтобы элементы решали, когда падать. Breakpoint может и сбросить basis, если один размер никогда не переносится чисто.

Basis at a breakpoint

css

.toolbar {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}

.toolbar__action {
flex: 1 1 10rem;
}

@media (max-width: 36rem) {
.toolbar__action {
flex-basis: 100%;
}
}

Узкие viewport — не другой язык вёрстки: те же flex-инструменты, другие значения. Меняйте направление или wrap; не изобретайте второе HTML-дерево.

Спокойная привычка адаптивного flex

Сначала один главный breakpoint. Предпочитайте wrap и смену направления перестановкам через order. Держите исходный порядок разумным. Гибкие изображения, сложные системы breakpoints и полную теорию Responsive оставьте следующим урокам.

Named stack roles

css

.page {
display: flex;
flex-direction: row;
gap: 1.5rem;
}

.page__main {
flex: 1 1 auto;
min-width: 0;
}

.page__rail {
flex: 0 0 16rem;
}

@media (max-width: 48rem) {
.page {
flex-direction: column;
}

.page__rail {
flex-basis: auto;
width: auto;
}
}

Min-width wrap guard

css

.chips {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}

.chips__item {
flex: 0 1 auto;
min-width: 7rem;
}

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

Соберите ряд карточек с flex-wrap: wrap и flex: 1 1 14rem.
Переведите оболочку в flex-direction: column при max-width: 40rem.
Задайте действиям панели flex-basis: 100% на маленьком breakpoint.
Добавьте min-width, чтобы чипы переносились, а не давились.
Не используйте order, чтобы «починить» адаптивную вёрстку.

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

Только бесконечно сжимать элементы вместо переноса или стека
Использовать order как адаптивный инструмент и ломать порядок табуляции
Забыть flex-wrap и удивляться, почему карточки никогда не падают
Свалить все flex-свойства в один гигантский media query
Считать этот урок целым курсом Responsive Design

Кратко

Адаптивный flex подстраивает wrap, направление и basis под ширину
flex-wrap плюс разумный basis/min-width даёт строкам перестроиться
Media query меняют flex-direction, чтобы складывать на узких экранах
Предпочитайте спокойные breakpoints; избегайте order для трюков вёрстки
Более глубокие модули Responsive и Media Queries — позже

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

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

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

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

❓

Вопросы

🎯

70%

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

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

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

Язык