display, FlexboxНа прошлом уроке мы создали визитку с блочной моделью. Теперь — Flexbox: модель раскладки, которая позволяет легко выравнивать элементы в ряд или в колонку, распределять пространство и центрировать блоки. Она приходит на смену «хакам» с inline-block и упрощает вёрстку.
display: flex и направление оси.justify-content, align-items.flex-wrap.display: flexРодитель с display: flex становится flex-контейнером, его прямые дети — flex-элементами.
.container {
display: flex;
}По умолчанию элементы выстраиваются в ряд (горизонтально).
flex-directionНаправление главной оси:
| Значение | Ось |
|---|---|
row | Горизонтально (по умолчанию) |
column | Вертикально |
row-reverse | Горизонтально, справа налево |
column-reverse | Снизу вверх |
.container {
display: flex;
flex-direction: column;
}justify-contentРаспределение вдоль главной оси:
| Значение | Эффект |
|---|---|
flex-start | В начало |
flex-end | В конец |
center | По центру |
space-between | Между элементами равномерно |
space-around | Вокруг каждого равномерно |
.nav {
display: flex;
justify-content: space-between;
}align-itemsВыравнивание вдоль поперечной оси:
| Значение | Эффект |
|---|---|
flex-start | К началу |
flex-end | К концу |
center | По центру |
stretch | Растянуть (по умолчанию) |
.container {
display: flex;
align-items: center;
}flex-wrap и gap.container {
display: flex;
flex-wrap: wrap; /* перенос на новую строку при нехватке места */
gap: 20px; /* отступ между элементами */
}gap — современное свойство для отступов между flex-элементами (и grid).
flex-элемента.item {
flex: 1; /* занимать доступное место */
flex-grow: 1; /* расти при наличии места */
flex-shrink: 0; /* не сжиматься */
flex-basis: 200px;/* базовая ширина */
}flex: 1 — краткая запись для равномерного распределения.
Создай навигацию: 4–5 ссылок в ряд с justify-content: space-between.
Три карточки в ряд. Используй flex, gap. При сужении окна — перенос (flex-wrap).
Центрируй блок по вертикали и горизонтали страницы с помощью flex на body (или обёртке).
Колонка: блоки идут сверху вниз (flex-direction: column), выровнены по центру.
Мы освоили Flexbox: направление, выравнивание, перенос и gap. На следующем уроке изучим позиционирование (relative, absolute, fixed).
flex-direction и направление выравнивания.display: flex контейнеру — дочерние элементы не выстроятся.justify-content и align-items — первое по главной оси, второе по поперечной.flex-wrap — элементы начнут «вылезать» за границы при малой ширине.Создай header с логотипом (текст или картинка) слева и меню справа. Используй display: flex и justify-content: space-between.
Сверстай 6 карточек в сетке: 3 в ряд на широком экране, с flex-wrap при сужении. Используй gap для отступов.
Создай страницу, где единственный блок контента центрирован и по вертикали, и по горизонтали. Используй flex на body или обёртке и min-height: 100vh.
Три блока в колонке (flex-direction: column). Каждый занимает равную высоту (flex: 1). Контейнер на всю высоту экрана.
Footer с тремя колонками: «О нас», «Контакты», «Ссылки». Каждая колонка — flex-элемент с flex: 1.
Карточка: слева — иконка/квадрат, справа — заголовок и текст. Внутри карточки — flex с align-items: center и gap.
Меню из 5 пунктов. На узком экране (уменьши окно) пункты переносятся на новую строку благодаря flex-wrap. Добавь отступы между пунктами.