Модуль 06 — Flexbox

display: flex на родителе делает его flex-контейнером, а его прямых детей — flex-элементами. Элементы выстраиваются в линию вдоль главной оси (по умолчанию — слева направо), по поперечной оси (сверху вниз) растягиваются на высоту ряда.

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Flexbox</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .row { display: flex; gap: 8px; padding: 8px; background: #eceff1; }
        .item { padding: 8px 12px; background: #1967d2; color: white; }
        .tall { padding-bottom: 40px; }
    </style>
</head>
<body>
    <div class="row">
        <div class="item">Первый</div>
        <div class="item tall">Второй, повыше</div>
        <div class="item">Третий</div>
    </div>
</body>
</html>

Блоки div, которые раньше встали бы друг под другом, встали в ряд, каждый шириной по содержимому. Первый и третий растянулись по высоте до второго — это поведение по умолчанию align-items: stretch. gap: 8px — промежуток между элементами: не нужно задавать margin каждому и обнулять его у последнего.

flex-direction: column поворачивает главную ось вертикально — элементы встают столбиком, и все свойства выравнивания «поворачиваются» вместе с осью.

justify-content распределяет свободное место вдоль главной оси:

align-items выравнивает элементы поперёк главной оси — в ряду это вертикаль:

Сочетание justify-content: center и align-items: center — самый короткий способ поставить что угодно точно в центр блока по обеим осям, задача, над которой верстальщики годами ломали голову до Flexbox. Для одного элемента выравнивание переопределяет align-self.

Логотип слева, меню справа, всё по центру высоты — типовая шапка в три свойства. Меню — список <ul> (это перечень ссылок), который тоже стал flex-контейнером:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Шапка</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; font-family: Arial, sans-serif; }
        .header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 12px 16px;
            background: #1967d2;
        }
        .logo { color: white; font-weight: bold; font-size: 1.25rem; text-decoration: none; }
        .menu { display: flex; gap: 16px; margin: 0; padding: 0; list-style: none; }
        .menu a { color: white; text-decoration: none; }
    </style>
</head>
<body>
    <header class="header">
        <a class="logo" href="#">Кафе «Нева»</a>
        <nav>
            <ul class="menu">
                <li><a href="#">Меню</a></li>
                <li><a href="#">Новости</a></li>
                <li><a href="#">Контакты</a></li>
            </ul>
        </nav>
    </header>
</body>
</html>

Вложенные flex-контейнеры — нормальная практика: шапка раскладывает два блока, меню — свои пункты. list-style: none, margin: 0 и padding: 0 убирают маркеры и отступы, которые у списка по умолчанию. На узком экране четыре пункта меню уже не поместятся в строку — как с этим быть, в модуле 08.

Свойство flex у элемента — сокращение трёх: flex-grow (какую долю свободного места забрать), flex-shrink (можно ли сжимать, когда места мало), flex-basis (исходный размер).

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>flex-grow</title>
    <style>
        body { font-family: Arial, sans-serif; }
        .layout { display: flex; gap: 8px; }
        .layout > * { padding: 10px; color: white; }
        .side { flex: 0 0 120px; background: #6a1b9a; }
        .main { flex: 1; background: #1967d2; }
    </style>
</head>
<body>
    <div class="layout">
        <aside class="side">Боковая колонка: 120px</aside>
        <main class="main">Основная колонка забирает всё оставшееся место</main>
    </div>
</body>
</html>

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

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Карточки</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        body { margin: 0; padding: 12px; font-family: Arial, sans-serif; background: #f5f5f5; }
        h1 { margin: 0 0 8px; font-size: 1.25rem; }
        .cards { display: flex; flex-wrap: wrap; gap: 12px; }
        .card {
            flex: 1 1 160px;
            padding: 12px;
            background: white;
            border: 1px solid #ddd;
            border-radius: 8px;
        }
        .card h2 { margin: 0 0 4px; font-size: 1rem; }
        .card p { margin: 0; color: #555; }
    </style>
</head>
<body>
    <h1>Напитки</h1>
    <div class="cards">
        <article class="card"><h2>Капучино</h2><p>220 ₽</p></article>
        <article class="card"><h2>Раф</h2><p>290 ₽</p></article>
        <article class="card"><h2>Американо</h2><p>180 ₽</p></article>
        <article class="card"><h2>Какао</h2><p>210 ₽</p></article>
    </div>
</body>
</html>

Ни одного медиазапроса — а раскладка подстроилась под ширину: 720px вмещают четыре карточки по 160px и больше, 360px — только две. Элементы последней строки растягиваются на всю её ширину; если нужна строгая сетка с одинаковыми колонками во всех строках, удобнее Grid (модуль 07).

На короткой странице подвал «всплывает» к середине экрана. Решение: body — колонка высотой не меньше окна (min-height: 100vh), основная часть забирает всё свободное место:

<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title>Подвал внизу</title>
    <style>
        *, *::before, *::after { box-sizing: border-box; }
        body {
            margin: 0;
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            font-family: Arial, sans-serif;
        }
        header, footer { padding: 10px 16px; background: #37474f; color: white; }
        main { flex: 1; padding: 10px 16px; }
    </style>
</head>
<body>
    <header>Шапка</header>
    <main>Короткая страница: содержимого мало.</main>
    <footer>Подвал прижат к низу окна</footer>
</body>
</html>

Когда содержимого станет больше высоты окна, страница просто вырастет, и подвал окажется после содержимого, как обычно.