Flex и Grid — современная вёрстка
Раньше веб-разработчики мучились с float и position. Сейчас есть Flexbox и Grid — два мощных инструмента вёрстки. Flex — для одномерной (строка ИЛИ столбец). Grid — для двумерной (строки И столбцы). Зная эти два — собираешь любой макет.
Flex — для одной оси
display: flex на родителе → дети становятся в РЯД (по умолчанию).
→ в столбец. Управление пробелами: gap: 16px. Выравнивание ПО ОСИ:
(или flex-start/end/space-between). Поперёк оси:
Растяжение детей: flex: 1 на ребёнке — займёт оставшееся место.
Любимые паттерны Flex
Header с лого слева и меню справа:
Кнопка с иконкой и текстом по центру:
Карточки в ряд с переносом:
Sticky-footer: на main flex: 1, footer прижимается к низу.
Grid — для двух осей
display: grid на родителе.
три равных колонки.
фиксированный сайдбар + растягивающийся контент. gap: 20px — пробелы. Дети сами раскладываются.
три равных, короче.
адаптивная сетка которая сама решает сколько колонок войдёт.
Когда что
Простое правило: ОДНА строка/столбец → Flex. ДВЕ оси (типа карточки в сетке) → Grid. Часто комбинируют: страница в Grid (header / main / footer), а внутри header — Flex (лого + меню). Пробуй сначала Flex, не получается — переключайся на Grid. Оба инструмента работают на ВСЕХ современных браузерах, никаких префиксов больше.
/* ============== FLEX — для одной оси ============== */
/* Header с лого слева и меню справа */
.header {
display: flex;
justify-content: space-between; /* раздвигает влево-вправо */
align-items: center; /* по центру вертикально */
padding: 16px 32px;
}
/* Кнопка с иконкой */
.btn {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* Колонка карточек с переносом */
.cards {
display: flex;
flex-wrap: wrap; /* перенос на новую строку при переполнении */
gap: 16px;
}
.cards > .card {
flex: 1 1 280px; /* минимум 280px, растягивается до равной */
}
/* Sticky-footer (footer прижат к низу даже на короткой странице) */
body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }
/* ============== GRID — для двух осей ============== */
/* Лента карточек 3 в ряд */
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
/* Адаптивная сетка — сама решит сколько колонок */
.adaptive {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 16px;
}
/* На широком — 4-5 колонок, на узком — 1-2, без media-queries */
/* Layout страницы: сайдбар + контент */
.layout {
display: grid;
grid-template-columns: 240px 1fr; /* фикс + растяжение */
gap: 24px;
min-height: 100vh;
}
/* Сложный layout 2x2 */
.dashboard {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto 1fr;
gap: 16px;
}
.dashboard .header { grid-column: 1 / -1 } /* шапка на всю ширину */
/* ============== ЦЕНТРИРОВАНИЕ ============== */
/* Самый короткий способ центрировать что угодно: */
.center {
display: grid;
place-items: center; /* и по горизонтали и по вертикали */
}
/* Или через flex */
.center-flex {
display: flex;
justify-content: center;
align-items: center;
}Flex и Grid — главные паттерны со сравнением