Содержание
По умолчанию HTML-элементы выстраиваются сверху вниз, каждый с новой строки. Это называется нормальным потоком. Для веб-плаката такого поведения недостаточно, поэтому в CSS существуют три инструмента, позволяющих управлять расположением элементов: Flexbox, Grid и абсолютное позиционирование. В этой статье разберём каждый из них с примерами кода и живыми демонстрациями.
Нормальный поток
Прежде чем менять расположение элементов, стоит понять, как они ведут себя без вмешательства.
Блок 1
Блок 2
Блок 3
<div class="container">
<div class="box box-1">Блок 1</div>
<div class="box box-2">Блок 2</div>
<div class="box box-3">Блок 3</div>
</div>
.box {
padding: 20px;
color: white;
font-size: 18px;
}
Каждый div занял всю ширину и встал под предыдущим. Элементы не знают друг о друге, не выстраиваются в ряд, не делят пространство. Они просто падают вниз, как книги, положенные в стопку.
Flexbox в ряд
Flexbox — это способ управления элементами вдоль одной оси. Вы берёте контейнер, говорите ему display: flex, и все дочерние элементы мгновенно перестраиваются в горизонтальный ряд.
Блок 1
Блок 2
Блок 3
<div class="flex-container">
<div class="box box-1">Блок 1</div>
<div class="box box-2">Блок 2</div>
<div class="box box-3">Блок 3</div>
</div>
.flex-container {
display: flex;
}
/* Одна строка — и блоки встают в ряд */
Блоки больше не падают вниз. Они встали в ряд, каждый занял ширину по содержимому. Это произошло потому, что Flexbox по умолчанию выстраивает элементы вдоль горизонтальной оси (row). Давайте разберём свойства, которыми вы будете пользоваться чаще всего.
gap задаёт промежутки между элементами. Это удобнее, чем прописывать margin каждому блоку по отдельности.
Блок 1
Блок 2
Блок 3
<div class="flex-container">
<div class="box box-1">Блок 1</div>
<div class="box box-2">Блок 2</div>
<div class="box box-3">Блок 3</div>
</div>
.flex-container {
display: flex;
gap: 16px;
}
/* gap задаёт промежутки между элементами */
justify-content управляет распределением элементов вдоль основной оси. Значение space-between раскидывает блоки по краям, а свободное пространство распределяет между ними. Значение center собирает всё в центр.
Блок 1
Блок 2
Блок 3
<div class="flex-container">
<div class="box box-1">Блок 1</div>
<div class="box box-2">Блок 2</div>
<div class="box box-3">Блок 3</div>
</div>
.flex-container {
display: flex;
justify-content: space-between;
}
/* Блоки раскидываются по краям,
свободное место — между ними */
align-items управляет выравниванием вдоль поперечной оси. Это полезно, когда блоки разной высоты. Значение center выравнивает их по вертикальному центру. Значение stretch (по умолчанию) растягивает все блоки до высоты самого высокого.
Высокий
Средний
Очень высокий
<div class="flex-container">
<div class="box box-1">Высокий</div>
<div class="box box-2">Средний</div>
<div class="box box-3">Очень высокий</div>
</div>
.flex-container {
display: flex;
align-items: center;
gap: 16px;
min-height: 200px;
}
/* Блоки разной высоты выравниваются
по вертикальному центру */
flex на дочернем элементе управляет тем, как блок делит свободное пространство. Значение flex: 1 говорит элементу занять всё доступное пространство поровну с соседями. Это типичная раскладка для секции веб-плаката с несколькими колонками.
Блок 1
Блок 2
Блок 3
<div class="flex-container">
<div class="box box-1">Блок 1</div>
<div class="box box-2">Блок 2</div>
<div class="box box-3">Блок 3</div>
</div>
.flex-container {
display: flex;
gap: 16px;
}
.box {
flex: 1;
}
/* flex: 1 — каждый блок берёт
равную долю свободного пространства */
Flexbox думает одномерно. Если вам нужно выстроить элементы в одну линию. Например, горизонтально или вертикально, то Flexbox подходит идеально. Если нужна сетка из строк и столбцов одновременно, переходите к Grid.
Flexbox: вертикальные секции
Самый частый случай использования Flexbox в веб-плакате — вертикальная раскладка секций на всю высоту экрана. Свойство flex-direction: column возвращает элементы в вертикальную ось, но уже с возможностями Flexbox.
<div class="poster">
<section class="hero">Первый экран</section>
<section class="content">Содержимое</section>
<section class="footer">Финал</section>
</div>
.poster {
display: flex;
flex-direction: column;
}
.hero {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #FE3904;
color: white;
font-size: 48px;
}
/* Вложенный flex центрирует содержимое
по обеим осям — 4 строки кода */
Обратите внимание на вложенный display: flex с align-items: center и justify-content: center на секции .hero. Это центрирует содержимое по обеим осям одновременно. Четыре строки CSS и текст идеально посередине экрана. Это один из самых полезных паттернов Flexbox.
Свойство min-height: 100vh делает секцию высотой в один экран. Единица vh — это один процент от высоты видимого окна браузера. Значение 100vh означает полная высота экрана.
Grid: двумерная сетка
Если Flexbox управляет элементами вдоль одной оси, то Grid работает сразу в двух направлениях. Вы задаёте контейнеру количество колонок, а строки создаются автоматически.
1
2
3
4
5
6
<div class="grid-container">
<div class="box box-1">1</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
<div class="box box-5">5</div>
<div class="box box-6">6</div>
</div>
.grid-container {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: 16px;
}
/* 1fr 1fr 1fr — три равные колонки.
Можно записать: repeat(3, 1fr) */
Свойство grid-template-columns создаёт три колонки равной ширины. Единица fr означает одна доля свободного пространства. Три раза 1fr — три равных доли. Можно записать короче: repeat(3, 1fr). Шесть элементов в три колонки — получается два ряда.
grid-template-columns принимает разные значения: 1fr 1fr 1fr — три равных колонки, 200px 1fr 1fr — левая фиксированная, остальные гибкие, 1fr 2fr 1fr — широкая центральная. Экспериментируйте с пропорциями, чтобы найти нужную раскладку.
По умолчанию Grid заполняет ячейки по порядку, слева направо, сверху вниз. Но вы можете разместить элемент в конкретной позиции с помощью grid-column и grid-row.
Широкий блок
2
3
4
<div class="grid-container">
<div class="box box-wide">Широкий блок</div>
<div class="box box-2">2</div>
<div class="box box-3">3</div>
<div class="box box-4">4</div>
</div>
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}
.box-wide {
grid-column: 1 / 3;
}
/* 1 / 3 — начать с линии 1,
закончить на линии 3 (две колонки) */
Запись grid-column: 1 / 3 означает: «начни с первой линии сетки и закончи на третьей». Линии нумеруются начиная с единицы, и их всегда на одну больше, чем колонок. В сетке из трёх колонок — четыре линии. Элемент от линии 1 до линии 3 занимает две колонки.
Grid: модульная раскладка
Вот пример, приближённый к реальному веб-плакату. Три блока разного размера формируют модульную композицию.
Высотки
Описание пчелиной строительной компании
<div class="poster-grid">
<div class="title">Высотки</div>
<div class="image"></div>
<div class="description">Описание пчелиной строительной компании</div>
</div>
.poster-grid {
display: grid;
grid-template-columns: 2fr 1fr;
grid-template-rows: 1fr 1fr;
gap: 8px;
height: 100vh;
}
.image {
grid-row: 1 / 3;
grid-column: 2;
}
/* image занимает правую колонку
на всю высоту (обе строки) */
Здесь комбинация Grid и Flexbox: контейнер использует Grid для общей раскладки, а ячейка .title внутри себя использует Flexbox для центрирования текста. Это типичный паттерн — Grid для структуры, Flexbox для содержимого.
Адаптивность Grid-раскладки можно сделать одной строкой, без media queries. Свойство grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)) создаёт столько колонок, сколько помещается в контейнер, при условии что каждая не уже 250 пикселей. На широком экране их будет четыре, на узком — одна. Браузер решает сам.
Absolute: вне потока
Абсолютное позиционирование вырывает элемент из нормального потока. Он больше не занимает место среди соседей и не влияет на их расположение. Вместо этого он привязывается к ближайшему родителю с position: relative и размещается по заданным координатам.
Я в потоке
Я абсолютный
Я тоже в потоке
<div class="container">
<div class="box box-1">Я в потоке</div>
<div class="box box-absolute">Я абсолютный</div>
<div class="box box-3">Я тоже в потоке</div>
</div>
.container {
position: relative;
min-height: 200px;
}
.box-absolute {
position: absolute;
top: 30px;
right: 20px;
width: 180px;
}
/* Элемент выпал из потока.
Соседи не знают о нём
и не оставляют для него место. */
Лаймовый и голубой блоки стоят друг под другом так, словно красного блока не существует. Он выпал из потока и занял позицию по координатам top: 30px и right: 20px относительно контейнера с position: relative. Элемент с position: absolute невидим для своих соседей — они не знают о нём и не оставляют для него место.
Координаты задаются свойствами top, right, bottom, left. Они отмеряют расстояние от соответствующего края родителя с position: relative. Если ни у одного родителя нет position: relative, элемент привязывается к краям окна браузера, что обычно нежелательно.
Absolute: декоративные элементы
В контексте веб-плаката абсолютное позиционирование отлично работает для декоративных элементов, которые плавают поверх основной вёрстки.
Кружочки
<section class="hero-section">
<h1 class="title">Кружочки</h1>
<div class="floating-circle circle-1"></div>
<div class="floating-circle circle-2"></div>
<div class="floating-circle circle-3"></div>
</section>
.hero-section {
position: relative;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: black;
overflow: hidden;
}
.title {
color: white;
font-size: 80px;
z-index: 2;
}
.floating-circle {
position: absolute;
border-radius: 50%;
z-index: 1;
}
.circle-1 {
width: 200px;
height: 200px;
background: #FE3904;
top: 10%;
left: 5%;
animation: drift 8s ease-in-out infinite alternate;
}
@keyframes drift {
from { transform: translate(0, 0); }
to { transform: translate(30px, -40px); }
}
/* Flex центрирует заголовок.
Absolute размещает круги.
z-index управляет наложением. */
Здесь три техники работают вместе. Flexbox центрирует заголовок. Absolute размещает круги по координатам. А z-index управляет порядком наложения — заголовок с z-index: 2 всегда поверх кругов с z-index: 1. Свойство overflow: hidden на контейнере обрезает круги, если анимация вынесет их за границу секции.
Координаты заданы в процентах — top: 10%, left: 5% — а не в пикселях. При изменении размера окна круги сохраняют свои относительные позиции. Для декоративных элементов это оптимальный подход.
Когда что использовать
Flexbox подходит для линейных раскладок: секции страницы друг под другом, несколько блоков в ряд, центрирование содержимого, распределение пространства.
Grid подходит для двумерных раскладок: модульные сетки с ячейками разного размера, колоночные структуры, адаптивные раскладки, которые перестраиваются автоматически.
Absolute подходит для элементов вне потока: декоративные фигуры поверх содержимого, наложения и перекрытия.
Все три инструмента свободно комбинируются. Grid для общей раскладки страницы, Flexbox для центрирования внутри ячеек, Absolute для декоративных элементов поверх. Это не конкуренция, а разделение обязанностей.
Если элемент несёт информацию — текст, заголовок — он должен стоять в потоке через Flexbox или Grid. Если элемент декоративный — фоновая фигура, летающий объект — его можно позиционировать абсолютно. Это убережёт вас от макетов, которые рассыпаются на мобильных экранах.
