Flexbox простыми словами: display flex, justify-content и align-items
Как работает Flexbox в CSS: контейнер и элементы, главная и поперечная ось, justify-content, align-items, gap, flex-wrap и flex: 1 — с примерами для начинающих.
Перейти к практике по теме курса ↓
Flexbox — способ раскладки в CSS: родителю пишут display: flex, и его дети выстраиваются в строку, а дальше их выравнивают двумя свойствами. justify-content двигает элементы вдоль строки (к началу, по центру, по краям), align-items — поперёк (вверх, по центру, вниз). Отступ между элементами задаёт gap. Классическая задача «поставить по центру» решается тремя строками: display: flex; justify-content: center; align-items: center;.
Контейнер и элементы
Flex включается у родителя, а слушаются его прямые дети. Направление задаёт flex-direction: row — в строку (по умолчанию), column — в столбец. От направления зависят оси: главная идёт вдоль раскладки, поперечная — поперёк. В столбце justify-content двигает элементы уже по вертикали.
justify-content
flex-start — к началу, center — по центру, flex-end — к концу, space-between — первый у начала, последний у конца, остальные поровну между. Шапка сайта с логотипом слева и корзиной справа — это display: flex; justify-content: space-between;: на любой ширине они останутся у краёв.
align-items и gap
align-items: center выравнивает по центру поперёк — значок и текст в кнопке встают на одну линию. stretch (по умолчанию) растягивает элементы на всю высоту строки. gap: 16px ставит одинаковый промежуток между элементами — не нужно подбирать отступы каждому.
flex: 1 и перенос
flex: 1 у элемента — «займи всё свободное место»: поле поиска растягивается между логотипом и корзиной. Если у нескольких элементов flex: 1, они делят место поровну. flex-wrap: wrap переносит элементы на новую строку, когда им не хватает ширины: карточки на узком экране встают в два ряда сами.
Частые вопросы
Как выровнять блок по центру с помощью flex?
Задайте родителю display: flex, justify-content: center и align-items: center. Дочерний блок встанет по центру и по горизонтали, и по вертикали, если у родителя есть высота.
Чем justify-content отличается от align-items?
Justify-content выравнивает элементы вдоль главной оси, то есть вдоль раскладки, а align-items — поперёк неё. В строке это горизонталь и вертикаль, в столбце — наоборот.
Когда использовать Flexbox, а когда Grid?
Flexbox удобен для раскладки в одну линию: меню, кнопки, шапка, ряд карточек с переносом. Grid лучше для двумерной сетки, где важны и строки, и столбцы одновременно.
Где потренироваться
Курс «HTML и CSS» начинается с разметки — уроки «Страница — это текст с пометками» и «Скелет документа» открыты без регистрации, а раскладке посвящены следующие уроки. Задачи без регистрации — в тренажёре по HTML и CSS. Тот же принцип в дизайне — auto layout: его разбирает урок курса Figma.
Попробуйте задание из курса
Выберите ответ — сразу получите объяснение. Регистрация не нужна.
Что такое HTML?
Ещё в блоге
Кто такой тестировщик (QA) и чем он занимается: профессия простыми словами
Тестировщик ищет ошибки в программах до того, как их найдут пользователи. Чем занимается QA-инженер, что нужно знать новичку и как стать тестировщиком с нуля.
Правила чтения итальянского языка: c, g, ch, gh, gli, gn и sc
Как читать по-итальянски с нуля: когда c и g мягкие, зачем h в ch и gh, как читаются gli, gn, sc и двойные согласные, куда падает ударение. С примерами.
Условие if в Python: if, elif, else, and и or с примерами
Как работает условие if в Python: синтаксис с двоеточием и отступом, elif и else, сравнения, and, or и not, вложенные условия и частые ошибки новичков.
Что такое JavaScript простыми словами: для чего он нужен и как его включить
JavaScript — язык, который оживляет страницы сайтов. Что это простыми словами, зачем он браузеру, как включить JavaScript и с чего начать учить.