Загрузка...

Flex-контейнер в CSS

Введение во Flexbox сделало родителя контейнером. Этот урок остаётся на контейнере: выберите главную ось, распределите пространство, выровняйте по поперечной оси и перенесите строки. Рост элементов (flex-grow, flex-basis) ждёт урок Flex Items.

Набор инструментов flex-контейнера

📊 Flex-контейнер кратко

Свойство	Повседневная роль
`flex-direction`	Задаёт главную ось: `row`, `column` или reverse-варианты
`justify-content`	Распределяет элементы вдоль главной оси
`align-items`	Выравнивает элементы по поперечной оси (одна строка)
`flex-wrap`	Разрешает перенос элементов на новые строки
`align-content`	Упаковывает несколько flex-строк по поперечной оси
`gap`	Отступы между элементами (и строками) без борьбы с margin

Помните: justify едет по главной оси; align — по поперечной. Смените flex-direction на column — и эти роли повернутся вместе с осями.

flex-direction — выберите главную ось

По умолчанию row. Используйте column для вертикальных стопок вроде боковых меню или групп формы. Reverse-варианты переворачивают визуальный порядок — проверьте, что порядок чтения остаётся разумным.

Колоночный flex-контейнер

css

.stack {
display: flex;
flex-direction: column;
gap: 0.75rem;
}

justify-content — распределение по главной оси

Распределите свободное место вдоль главной оси: flex-start, center, flex-end, space-between, space-around, space-evenly. Шапкам часто нужен space-between.

Варианты justify

css

.bar {
display: flex;
justify-content: space-around;
align-items: center;
gap: 0.5rem;
}

align-items — выравнивание по поперечной оси

На одной строке align-items управляет высотой/вертикальным положением в ряду (или горизонтальным в колонке). stretch — по умолчанию; center — повседневный клей UI.

Выравнивание элементов по центру

css

.card-row {
display: flex;
align-items: center;
gap: 1rem;
min-height: 6rem;
}

Wrap и align-content

При flex-wrap: wrap лишние элементы образуют новые строки. align-content упаковывает эти строки, когда есть свободное место на поперечной оси — при nowrap почти ничего не делает.

Упаковка перенесённых строк

css

.chip-board {
display: flex;
flex-wrap: wrap;
align-content: flex-start;
gap: 0.5rem;
min-height: 8rem;
}

Спокойная привычка контейнера

Сначала direction, затем justify, затем align-items, затем wrap при необходимости. Оставьте gap для промежутков. Рост отдельных элементов — на следующий урок; двумерные сетки страницы — позже CSS Grid.

Именованные роли контейнера

css

.panel {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 1rem;
}

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

Соберите .stack с flex-direction: column и тремя блоками.
Сравните justify-content: space-between и center на широкой полосе.
Увеличьте min-height и сравните align-items: stretch и center.
Перенесите чипы и посмотрите align-content: flex-start.
Напишите одно предложение: какие свойства относятся к элементам дальше, а не к контейнеру?

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

Мысленно путать justify и align после смены направления
Использовать row-reverse без проверки порядка клавиатуры/чтения
Ждать эффекта align-content при nowrap
Ставить flex-grow на контейнер вместо элемента
Требовать от свойств flex-контейнера полноценную 2D-сетку Grid

Кратко

Свойства контейнера задают направление, распределение, выравнивание и wrap
flex-direction определяет главную ось
justify-content vs align-items следуют главной vs поперечной оси
Wrap включает многострочные пакеты; align-content упаковывает эти строки
Рост на уровне элемента ждёт урок Flex Items

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

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

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

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

❓

Вопросы

🎯

70%

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

♾️

∞

Время

🔄

∞

Попытки

📝 Инструкции

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

Язык