Layout с Flexbox

С возвращением.

В предыдущем уроке ты изучил box model.

Content.

Padding.

Border.

Margin.

Большая семья коробок.

Теперь мы научимся красиво расставлять эти коробки на странице.

И тут входит Flexbox.

Flexbox — один из самых полезных layout-инструментов в CSS.

Он помогает выравнивать элементы в rows или columns.

Он помогает центрировать вещи.

Он помогает создавать navbar, cards, buttons, sections и layouts без полной потери рассудка.

Только частичной.

Потому что это всё ещё CSS.

Что Ты Изучишь

В этом уроке ты узнаешь:

что такое Flexbox;
что такое flex container;
что такое flex items;
как использовать display: flex;
как использовать flex-direction;
как использовать justify-content;
как использовать align-items;
как использовать gap;
как создавать простые layouts с cards;
как центрировать content с помощью Flexbox.

Что Такое Flexbox?

Flexbox означает Flexible Box Layout.

Это CSS layout system, созданная для организации элементов в одном направлении.

Это направление может быть:

row;
column.

Row идёт слева направо.

Column идёт сверху вниз.

Flexbox идеально подходит, когда нужно аккуратно выровнять элементы.

Например:

navigation links;
cards в одном row;
buttons;
profile sections;
hero layouts;
centered content.

До Flexbox центрирование вещей в CSS было похоже на попытку убедить кота выполнять инструкции.

Возможно?

Может быть.

Приятно?

Нет.

Создай Проект

Создай папку для этого урока:

mkdir css-lesson5
cd css-lesson5
touch index.html
touch style.css

Ты должен получить:

css-lesson5/
  index.html
  style.css

Открой папку в своём editor.

Мы построим маленькую landing page с navigation и cards.

Это хорошее упражнение для Flexbox.

Просто.

Практично.

Без загадочного CSS-лабиринта.

По крайней мере сегодня.

Напиши HTML

Открой index.html и добавь это:

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Layout с Flexbox</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header class="site-header">
    <nav class="navbar">
      <h1 class="logo">FlexSite</h1>

      <div class="nav-links">
        <a href="#">Главная</a>
        <a href="#">Курсы</a>
        <a href="#">Проекты</a>
        <a href="#">Контакт</a>
      </div>
    </nav>

    <section class="hero">
      <div class="hero-text">
        <h2>Изучай Flexbox Без Паники</h2>
        <p>Flexbox помогает выравнивать и организовывать элементы с меньшим хаосом и меньшим количеством драматичных вздохов.</p>
        <a href="#" class="button">Начать Обучение</a>
      </div>

      <div class="hero-box">
        <p>display: flex;</p>
      </div>
    </section>
  </header>

  <main class="page">
    <section class="cards">
      <article class="card">
        <h2>Выравнивай</h2>
        <p>Размещай элементы именно там, где нужно.</p>
      </article>

      <article class="card">
        <h2>Распределяй</h2>
        <p>Контролируй пространство между элементами.</p>
      </article>

      <article class="card">
        <h2>Организуй</h2>
        <p>Создавай чистые rows и columns.</p>
      </article>
    </section>
  </main>

  <footer class="site-footer">
    <p>Создано во время изучения CSS Flexbox.</p>
  </footer>
</body>
</html>

Эта страница имеет:

navigation bar;
logo;
links;
hero section;
text block;
visual box;
cards;
footer.

Идеально для практики Flexbox.

Теперь нужно заставить layout вести себя нормально.

Желательно вежливо.

Начни с Базовых Стилей

Открой style.css и добавь:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

Это даёт нам:

предсказуемые размеры;
отсутствие стандартного body margin;
простой font;
чистые links.

Хорошая база.

Плохая база делает layout болезненным.

Как строить сайт на мокрых спагетти.

Создай Flex Container

Чтобы использовать Flexbox, добавляем:

display: flex;

к container.

Пример:

.navbar {
  display: flex;
}

Container становится flex container.

Прямые дети внутри него становятся flex items.

В этом случае:

<nav class="navbar">
  <h1 class="logo">FlexSite</h1>
  <div class="nav-links">...</div>
</nav>

.navbar — это flex container.

.logo и .nav-links — это flex items.

Добавь это:

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

Теперь logo и links стоят в одной строке.

Logo идёт влево.

Links идут вправо.

Flexbox уже делает полезную работу.

Подозрительно полезную.

Но мы принимаем.

Flex Direction

Property flex-direction контролирует главное направление.

Значение по умолчанию:

flex-direction: row;

Это означает, что элементы идут слева направо.

Также можно использовать:

flex-direction: column;

Это означает, что элементы идут сверху вниз.

Пример:

.hero {
  display: flex;
  flex-direction: row;
}

Это размещает children внутри hero рядом друг с другом.

Добавь это:

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

Теперь hero text и hero box стоят рядом.

Намного лучше, чем два грустных блока без плана.

justify-content

justify-content контролирует выравнивание по main axis.

Если flex-direction — это row, main axis горизонтальный.

Распространённые значения:

justify-content: flex-start;
justify-content: center;
justify-content: flex-end;
justify-content: space-between;
justify-content: space-around;
justify-content: space-evenly;

В navbar мы использовали:

justify-content: space-between;

Это раздвигает элементы по разным краям.

Logo влево.

Links вправо.

Как нормальная navigation bar, которая знает свою работу.

В hero мы также использовали:

justify-content: space-between;

Это создаёт пространство между text и box.

Flexbox фактически расставляет мебель.

Наконец кто-то в CSS ведёт себя как взрослый.

align-items

align-items контролирует выравнивание по cross axis.

Если flex-direction — это row, cross axis вертикальный.

Распространённые значения:

align-items: flex-start;
align-items: center;
align-items: flex-end;
align-items: stretch;

Мы использовали:

align-items: center;

Это центрирует элементы вертикально.

Очень полезно.

Очень часто.

Очень приятно.

Когда-то центрирование вещей было CSS-horror story.

Flexbox сделал это намного менее драматичным.

Не полностью без драмы.

Но менее драматичным.

gap

Property gap создаёт пространство между flex items.

Пример:

.nav-links {
  display: flex;
  gap: 20px;
}

Добавь это:

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

Теперь navigation links имеют чистые отступы.

Не нужно добавлять margin каждому link.

Нет маленьких боёв со spacing.

Нет проблемы “почему последний элемент странный?”.

gap прекрасен.

CSS иногда дарит нам подарки.

Редко, но реально.

Стилизуй Header и Hero

Добавь эти styles:

.site-header {
  background-color: #111827;
  color: white;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.hero-text {
  max-width: 560px;
}

.hero-text h2 {
  font-size: 48px;
  margin: 0 0 16px;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

Теперь hero больше похож на настоящую section.

Button скруглённый.

Text читаемый.

Layout структурированный.

Никто не плачет.

Отличный прогресс.

Центрирование с Flexbox

Flexbox известен центрированием.

Чтобы центрировать что-то горизонтально и вертикально:

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
}

Добавь это:

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 180px;
  background-color: #1f2937;
  border: 2px solid #374151;
  border-radius: 24px;
  font-size: 22px;
  font-weight: 700;
}

Теперь текст внутри .hero-box идеально centered.

Это один из самых полезных Flexbox patterns.

Маленькое чудо.

Без древнего ритуала.

Без CSS-свечей.

Без принесения клавиатуры в жертву.

Cards с Flexbox

Теперь стилизуй cards section.

Добавь:

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  background-color: white;
  padding: 28px;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

Важная часть:

.card {
  flex: 1;
}

Это говорит каждой card занимать одинаковую часть доступного пространства.

Три cards.

Одинаковая ширина.

Чистый layout.

Без ручного калькулятора.

CSS считает сам.

Постарайся не выглядеть слишком удивлённым.

Property flex

Property flex контролирует, как flex items растут или сжимаются.

Это:

flex: 1;

означает:

Позволь этому элементу расти и делить доступное пространство поровну.

Если все cards имеют flex: 1, они становятся одинаковой ширины.

Пример:

.card {
  flex: 1;
}

Это очень полезно для cards, columns и sections.

Но не используй flex: 1 везде без мысли.

CSS tools мощные.

Молоток полезен.

Но ты не чистишь им зубы.

Footer

Добавь:

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Простой footer.

Без драмы.

Иногда это лучший footer.

Полный CSS

Твой style.css должен выглядеть так:

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: Arial, sans-serif;
  background-color: #f3f4f6;
  color: #111827;
}

a {
  color: inherit;
  text-decoration: none;
}

.site-header {
  background-color: #111827;
  color: white;
}

.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px;
}

.logo {
  margin: 0;
  font-size: 24px;
}

.nav-links {
  display: flex;
  gap: 20px;
  font-weight: 700;
}

.hero {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 64px 24px;
}

.hero-text {
  max-width: 560px;
}

.hero-text h2 {
  font-size: 48px;
  margin: 0 0 16px;
}

.hero-text p {
  color: #d1d5db;
  font-size: 20px;
  line-height: 1.7;
}

.button {
  display: inline-block;
  background-color: #2563eb;
  color: white;
  padding: 14px 20px;
  border-radius: 999px;
  font-weight: 700;
  margin-top: 16px;
}

.hero-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 260px;
  min-height: 180px;
  background-color: #1f2937;
  border: 2px solid #374151;
  border-radius: 24px;
  font-size: 22px;
  font-weight: 700;
}

.page {
  max-width: 1100px;
  margin: 40px auto;
  padding: 0 24px;
}

.cards {
  display: flex;
  gap: 24px;
}

.card {
  flex: 1;
  background-color: white;
  padding: 28px;
  border-radius: 18px;
  border: 2px solid #e5e7eb;
}

.card h2 {
  margin-top: 0;
}

.card p {
  color: #4b5563;
  font-size: 18px;
  line-height: 1.6;
}

.site-footer {
  text-align: center;
  padding: 32px 24px;
  color: #6b7280;
}

Сохрани.

Обнови.

Страница теперь должна иметь:

navigation с logo и links;
hero text и box рядом;
content centered внутри hero box;
три одинаковые cards;
чистый spacing.

Это Flexbox делает свою работу.

Тихо мощный.

Как developer, который починил production и не хвастался.

Редкое существо.

Частые Ошибки

Добавить display flex не тому элементу

Flexbox работает с direct children.

Если написать:

.card {
  display: flex;
}

это влияет на children внутри .card.

Это не организует сами cards между собой.

Чтобы организовать cards, добавь Flexbox к их parent:

.cards {
  display: flex;
}

Parent контролирует children.

Это предложение объясняет половину Flexbox.

И, возможно, немного семейной психологии.

Забыть gap

Без gap элементы могут касаться друг друга.

Плохо:

.cards {
  display: flex;
}

Лучше:

.cards {
  display: flex;
  gap: 24px;
}

Spacing имеет значение.

Без отступов layout выглядит переполненным.

Будто все пришли на вечеринку и стали на кухне.

Использовать Flexbox для всего

Flexbox прекрасен для one-dimensional layouts.

Rows или columns.

Но для полных two-dimensional layouts CSS Grid часто лучше.

Flexbox не плохой.

Он просто не ответ на каждый вопрос.

Не используй отвёртку, чтобы есть суп.

Практика

Создай страницу с:

navbar;
logo;
четырьмя navigation links;
hero section;
двумя hero columns;
тремя cards;
footer.

Используй Flexbox для:

navbar alignment;
navigation links;
hero layout;
card row;
centering одной box.

Используй эти properties:

display: flex;
flex-direction;
justify-content;
align-items;
gap;
flex: 1.

Меняй values и наблюдай, что происходит.

CSS становится понятным, когда экспериментируешь.

А не когда смотришь на него так, будто он должен тебе денег.

Мини-Задание

Создай pricing section с тремя plans:

Basic;
Standard;
Premium.

Каждый plan должен быть card.

Используй Flexbox, чтобы cards стояли в одном row.

Дай каждой card одинаковую ширину через:

flex: 1;

Сделай Premium card заметнее.

Добавь button внутри каждой card.

Потом отцентрируй button area с помощью Flexbox.

Это реальный Flexbox из жизни.

Cards.

Buttons.

Spacing.

Alignment.

Ежедневный хлеб frontend development.

Иногда хрустящий.

Но полезный.

Итог

Сегодня ты узнал, что:

Flexbox используется для one-dimensional layouts;
display: flex создаёт flex container;
direct children становятся flex items;
flex-direction контролирует направление row или column;
justify-content контролирует main-axis alignment;
align-items контролирует cross-axis alignment;
gap создаёт пространство между flex items;
flex: 1 позволяет элементам делить доступное пространство;
Flexbox прекрасен для navbars, cards, buttons и centering.

Flexbox — один из самых важных CSS-инструментов.

Изучи его хорошо.

Используй часто.

Но не используй абсолютно для всего.

Даже пиццу не стоит есть молотком.

Следующий Урок

В следующем уроке мы изучим CSS Grid.

Flexbox прекрасен для одного направления.

Grid мощный для rows и columns вместе.

Королевство layout расширяется.