Flexbox помогает быстро собирать интерфейсы: меню, карточки, панели. Если понять логику осей и выравнивания, верстка станет заметно проще.

Шаг 1. Делаем контейнер карточек

Сначала создаем HTML-разметку, где несколько карточек лежат внутри одного контейнера.

<section class="cards">
  <article class="card">
    <h2>HTML-семантика</h2>
    <p>Разбираем структуру страницы по блокам.</p>
  </article>

  <article class="card">
    <h2>Формы</h2>
    <p>Собираем удобные формы без боли.</p>
  </article>

  <article class="card">
    <h2>Адаптив</h2>
    <p>Делаем layout под разные экраны.</p>
  </article>
</section>

Шаг 2. Включаем Flexbox и задаем перенос

.cards {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}

.card {
  flex: 1 1 240px;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  padding: 16px;
  background: #ffffff;
}

flex-wrap: wrap разрешает перенос карточек на новую строку, когда не хватает ширины.

Шаг 3. Понимаем оси и выравнивание

  • justify-content — распределение по главной оси.
  • align-items — выравнивание по поперечной оси.
  • align-content — работа с несколькими рядами.
.cards {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 16px;
  flex-wrap: wrap;
}

Шаг 4. На том же Flexbox делаем меню

<nav class="main-nav" aria-label="Разделы">
  <a href="/html">HTML/CSS</a>
  <a href="/javascript">JavaScript</a>
  <a href="/canvas">Canvas</a>
</nav>
.main-nav {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

.main-nav a {
  padding: 8px 12px;
  border-radius: 8px;
  text-decoration: none;
  background: #f1f5f9;
  color: #0f172a;
}

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

  • Путают свойства контейнера и свойства элементов.
  • Не включают перенос на мобильных экранах.
  • Пытаются выравнивать все через margin, вместо flex-свойств.

Мини-чеклист

  • У контейнера есть display: flex.
  • Для адаптива настроен flex-wrap.
  • У элементов задан адекватный flex-basis.
  • Выравнивание настроено через justify-content и align-items.

После этого шаблона ты сможешь собрать большинство типовых UI-блоков без лишней сложности.

Обложка книги JavaScript с нуля: учимся программировать, создавая игры

Книга по JavaScript для начинающих

«JavaScript с нуля: учимся программировать, создавая игры»

Пошаговый формат с маленькими практическими задачами: от базового синтаксиса до первых игровых механик без перегруза теорией.

Читать книгу на ЛитРес →