Flexbox в CSS
Компоненты страницы набросали оболочки, панели, меню и галереи. Flexbox — современный способ выстраивать элементы в одном направлении — в ряд или столбец — с меньшей возней с float. Включите display: flex, познакомьтесь с flex items, затем углубитесь в следующих уроках Flexbox.
Стартовый набор Flexbox
📊 Flexbox одним взглядом
| Идея | Повседневная задача |
|---|---|
| Flex-контейнер | Родитель с display: flex (или inline-flex) |
| Flex-элементы | Прямые дети, участвующие в flex-раскладке |
| Главная ось | Основное направление движения элементов (по умолчанию ряд) |
| Поперечная ось | Перпендикулярное направление для выравнивания |
gap |
Встроенный промежуток между элементами |
| Следующие уроки | Свойства контейнера, свойства элемента, адаптивные flex-паттерны |
Сила Flexbox — в одном измерении. Для полноценных двумерных сеток страницы модуль Grid идёт после этого трека Flexbox.
Включите flex-контейнер
Поставьте display: flex на родителя. Дети становятся flex items и по умолчанию садятся в ряд.
.toolbar {
display: flex;
align-items: center;
}
.toolbar .btn {
padding: 0.5rem 0.75rem;
}
gap вместо войны с margin
gap разносит элементы без трюков collapse. Предпочитайте его для ровных промежутков между flex-детьми.
.toolbar {
display: flex;
gap: 0.75rem;
align-items: center;
}
Раздвиньте элементы по главной оси
justify-content распределяет свободное место вдоль главной оси. space-between — классический паттерн шапки: бренд слева, действия справа.
.site-header {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
Центрируйте по поперечной оси — и по обеим
align-items: center выравнивает элементы по поперечной оси. Сочетайте с justify для спокойного центрированного кластера в коробке.
.hero-actions {
display: flex;
justify-content: center;
align-items: center;
gap: 0.75rem;
min-height: 4rem;
}
Переносите, когда ряду не хватает места
flex-wrap: wrap позволяет элементам падать на следующую строку — вы уже мельком видели это в галерее. Урок Flex Responsive пойдёт дальше.
.chip-row {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
}
Спокойная привычка Flexbox
Используйте Flexbox для одномерных рядов и столбцов: навигация, тулбары, ряды карточек, центрирование. Дальше — детали контейнера, рост/сжатие элемента, затем адаптивный flex. Не ждите, что один Flexbox заменит каждую Grid-раскладку.
.cluster {
display: flex;
gap: 0.75rem;
align-items: center;
}
.cluster__main { /* grows later with flex item props */ }
.cluster__meta { /* stays compact */ }
Попробуйте сами
- Сделайте
.toolbarсdisplay: flexи тремя кнопками. - Добавьте
gapиalign-items: center. - Соберите шапку с
justify-content: space-between. - Отцентрируйте пару кнопок в коробке через justify + align.
- Запишите, какой следующий урок затронет идеи
flex-grow/flex-basis.
Частые ошибки
- Сыпать
display: flexна каждую обёртку без цели раскладки - Ждать от Flexbox поведения полной 2D-сетки Grid
- Воевать с отступами случайными margin вместо
gap - Пропускать следующие уроки и зубрить только это введение
- Навсегда оставаться на float-рядах, когда flex-ряд яснее
Итог
- Flexbox раскладывает элементы вдоль одной главной оси
display: flexсоздаёт контейнер; дети — flex itemsgap,justify-contentиalign-itemsоткрывают повседневные ряды- Wrap даёт взгляд на адаптивные ряды; дальше — больше
- Уроки контейнера, элемента и адаптивного Flexbox углубляют модель дальше
🧠 Проверьте Свои Знания
Проверьте Свои Знания
Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему
📝 Инструкции
- Внимательно прочитайте каждый вопрос
- Выберите лучший ответ на каждый вопрос
- Вы можете пересдавать тест столько раз, сколько захотите
- Ваш прогресс будет показан вверху