🎨

Модуль 2. CSS и оформление

Занятие 17
Flexbox

Сегодня мы выстроим меню и карточки в аккуратный ряд с помощью волшебного display: flex.

👀

Сегодня сделаем вот такое

📚

Стопкой или в ряд?

Блоки по умолчанию — стопкой, как книги на столе.

А меню и карточки нужны в ряд, как книги на полке.

Flexbox = гибкая полка для элементов.

<div class="shelf">
  <div class="book">📕</div>
  <div class="book">📗</div>
  <div class="book">📘</div>
</div>
.shelf {
  display: flex;
  gap: 12px;
  border-bottom: 8px solid #8d5a3b;
}
.book { font-size: 60px; }
👨‍👧‍👦

Родитель командует

  • display: flex пишем родителю
  • Прямые дети выстраиваются в ряд
  • Внуки не участвуют
<nav class="menu">
  <a href="#">Главная</a>
  <a href="#">Галерея</a>
  <a href="#">Контакты</a>
</nav>
.menu {
  display: flex;
  gap: 20px;
  padding: 12px;
  background: #2d3436;
}
.menu a { color: #ffeaa7; font-size: 22px; }
↔️

justify-content — вдоль ряда

  • flex-start — к началу
  • center — по центру
  • flex-end — к концу
  • space-between — по краям
  • space-around — поровну вокруг
<div class="row a"><b>1</b><b>2</b><b>3</b></div>
<div class="row b"><b>1</b><b>2</b><b>3</b></div>
<div class="row c"><b>1</b><b>2</b><b>3</b></div>
.row { display: flex; background: #dfe6e9; margin: 6px 0; }
b { background: #74b9ff; padding: 10px 18px; margin: 4px; }
.a { justify-content: center; }
.b { justify-content: space-between; }
.c { justify-content: flex-end; }
↕️

align-items — поперёк ряда

  • stretch — растянуть (по умолчанию)
  • center — по центру
  • flex-start / flex-end

🎯 Центр по обеим осям:
justify-content: center;
align-items: center;

<div class="stage"><div class="target">🎯</div></div>
.stage {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  background: #ffeaa7;
}
.target { font-size: 60px; }
🧃

gap, flex-wrap, flex: 1

  • gap: 16px — промежутки
  • flex-wrap: wrap — перенос, если не влезает
  • flex: 1 у детей — поровну делят место
<div class="cards">
  <div class="card">Меркурий</div>
  <div class="card">Венера</div>
  <div class="card">Земля</div>
</div>
.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1;
  min-width: 100px;
  padding: 30px 8px;
  text-align: center;
  background: #74b9ff;
  border-radius: 10px;
}
🧢

Шапка сайта

  • Шапка: space-between + align-items: center
  • Меню внутри — ещё один flex

Flex-контейнеры можно вкладывать.

<header class="header">
  <div class="logo">🚀 Космос</div>
  <nav class="menu">
    <a href="#">Планеты</a>
    <a href="#">Звёзды</a>
  </nav>
</header>
body { margin: 0; font-family: sans-serif; }
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: #2d3436;
}
.logo { color: white; font-size: 24px; }
.menu { display: flex; gap: 16px; }
.menu a { color: #ffeaa7; }
🐸

Играем: Flexbox Froggy

🌐 flexboxfroggy.com

  • Рассади лягушек на кувшинки
  • 24 уровня, есть русский язык
  • Кто пройдёт 10 уровней? 🏆

Ошибка №1: display: flex написали детям, а не родителю.

🃏

Запомни!

  • display: flexВключить Flexbox
  • justify-content: space-betweenРаздвинуть по краям
  • align-items: centerПо центру поперёк
  • gap: 16pxПромежутки
  • flex-wrap: wrapПеренос на новую строку
  • flex: 1Ребёнок занимает свободное место
⌨️

Практика: Меню и карточки в ряд

  1. Сделай шапку: логотип слева, меню справа (justify-content: space-between).
  2. Выстрой пункты меню в ряд с промежутком gap.
  3. Выстрой три карточки в ряд, одинаковой ширины (flex: 1).
  4. Добавь flex-wrap и сузь окно — посмотри, что произойдёт.

🚀 Со звёздочкой: Пройди первые 10 уровней игры Flexbox Froggy. Отцентрируй блок по вертикали и горизонтали на весь экран.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

✨ По желанию: Нарисуй, как будет выглядеть меню твоего будущего сайта.