Практичні макети з Flexbox · fullstack.org.ua

Просунутий20 хв· Fullstack Team

Практичні макети з Flexbox

Застосуйте Flexbox для створення адаптивної навігації, карток і макета з колонками та рядками.

Вступ

Flexbox зручно використовувати для макетів, у яких елементи розташовуються в одному основному напрямку: у рядку або колонці. На практиці за допомогою Flexbox можна створювати:

адаптивну навігацію;
сітки карток;
макети з бічною панеллю та основним вмістом;
рядки й колонки, що змінюють напрямок на малих екранах;
області, у яких окремі елементи займають доступний простір.

У цьому уроці поєднаємо ці сценарії в одному адаптивному макеті.

Базова модель Flexbox

Щоб перетворити елемент на flex-контейнер, використовуйте:

css

.container {
  display: flex;
}

html

<header class="site-header">
  <a class="logo" href="/">DevSpace</a>

  <nav class="main-nav" aria-label="Основна навігація">
    <a href="#features">Можливості</a>
    <a href="#courses">Курси</a>
    <a href="#about">Про платформу</a>
  </nav>

  <a class="header-action" href="#start">Почати навчання</a>
</header>

css

.site-header {
  display: flex;
  align-items: center;
  gap: 2rem;
  padding: 1rem 2rem;
}

.logo {
  flex-shrink: 0;
}

.main-nav {
  display: flex;
  justify-content: center;
  gap: 1.25rem;
  flex: 1 1 auto;
}

.header-action {
  flex-shrink: 0;
}

css

.site-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 2rem;
}

.main-nav {
  display: flex;
  flex: 1 1 20rem;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.75rem 1.25rem;
}

css

@media (max-width: 42rem) {
  .site-header {
    align-items: stretch;
    flex-direction: column;
  }

  .main-nav {
    justify-content: flex-start;
  }

  .header-action {
    align-self: flex-start;
  }
}

css

.page-layout {
  display: flex;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-list {
  display: flex;
  flex-wrap: wrap;
}

.card {
  display: flex;
  flex-direction: column;
}

html

<!doctype html>
<html lang="uk">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Курси DevSpace</title>
  <style>
    :root {
      color-scheme: light;
      font-family: system-ui, sans-serif;
      color: #172033;
      background: #f4f6fb;
    }

    * {
      box-sizing: border-box;
    }

    body {
      margin: 0;
    }

    a {
      color: inherit;
    }

    .site-header {
      display: flex;
      align-items: center;
      gap: 2rem;
      padding: 1rem 2rem;
      background: #172033;
      color: #ffffff;
    }

    .logo {
      flex-shrink: 0;
      font-size: 1.25rem;
      font-weight: 700;
      text-decoration: none;
    }

    .main-nav {
      display: flex;
      flex: 1 1 auto;
      flex-wrap: wrap;
      justify-content: center;
      gap: 0.75rem 1.25rem;
    }

    .main-nav a,
    .header-action {
      text-decoration: none;
    }

    .main-nav a {
      color: #d9e2f2;
    }

    .main-nav a:hover {
      color: #ffffff;
    }

    .header-action {
      flex-shrink: 0;
      padding: 0.65rem 1rem;
      border-radius: 0.5rem;
      background: #6d5dfc;
      color: #ffffff;
      font-weight: 700;
    }

    .page-layout {
      display: flex;
      align-items: flex-start;
      gap: 2rem;
      max-width: 75rem;
      margin: 0 auto;
      padding: 2rem;
    }

    .sidebar {
      flex: 0 0 15rem;
      padding: 1.25rem;
      border: 1px solid #dce2ef;
      border-radius: 0.75rem;
      background: #ffffff;
    }

    .sidebar h2 {
      margin-top: 0;
      font-size: 1.1rem;
    }

    .filters {
      display: flex;
      flex-direction: column;
      gap: 0.75rem;
      margin: 0;
    }

    .filter {
      display: flex;
      align-items: center;
      gap: 0.5rem;
    }

    .main-content {
      min-width: 0;
      flex: 1 1 auto;
    }

    .content-header {
      display: flex;
      align-items: flex-start;
      justify-content: space-between;
      gap: 1rem;
      margin-bottom: 1.5rem;
    }

    .content-header h1 {
      margin: 0;
      font-size: clamp(1.7rem, 4vw, 2.5rem);
    }

    .content-header p {
      margin: 0.5rem 0 0;
      color: #5f6b82;
    }

    .sort-control {
      flex: 0 0 auto;
      padding: 0.6rem;
      border: 1px solid #c9d1e2;
      border-radius: 0.5rem;
      background: #ffffff;
    }

    .card-list {
      display: flex;
      flex-wrap: wrap;
      gap: 1.5rem;
    }

    .card {
      display: flex;
      flex: 1 1 16rem;
      flex-direction: column;
      min-width: 0;
      padding: 1.25rem;
      border: 1px solid #dce2ef;
      border-radius: 0.75rem;
      background: #ffffff;
    }

    .card-content {
      display: flex;
      flex: 1;
      flex-direction: column;
    }

    .card h2 {
      margin: 0;
      font-size: 1.25rem;
    }

    .card p {
      color: #5f6b82;
      line-height: 1.5;
    }

    .card-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0.5rem 1rem;
      margin: 0.5rem 0;
      color: #5f6b82;
      font-size: 0.9rem;
    }

    .card-action {
      align-self: flex-start;
      margin-top: auto;
      padding: 0.65rem 1rem;
      border-radius: 0.5rem;
      background: #172033;
      color: #ffffff;
      text-decoration: none;
    }

    @media (max-width: 50rem) {
      .page-layout {
        flex-direction: column;
      }

      .sidebar {
        flex-basis: auto;
        width: 100%;
      }

      .filters {
        flex-direction: row;
        flex-wrap: wrap;
      }
    }

    @media (max-width: 42rem) {
      .site-header {
        align-items: stretch;
        flex-direction: column;
        gap: 1rem;
        padding: 1rem;
      }

      .main-nav {
        justify-content: flex-start;
      }

      .header-action {
        align-self: flex-start;
      }

      .page-layout {
        padding: 1rem;
      }

      .content-header {
        flex-direction: column;
      }

      .sort-control {
        width: 100%;
      }
    }
  </style>
</head>
<body>
  <header class="site-header">
    <a class="logo" href="/">DevSpace</a>

    <nav class="main-nav" aria-label="Основна навігація">
      <a href="#courses">Курси</a>
      <a href="#tracks">Навчальні треки</a>
      <a href="#about">Про платформу</a>
    </nav>

    <a class="header-action" href="#start">Почати навчання</a>
  </header>

  <div class="page-layout">
    <aside class="sidebar">
      <h2>Фільтри</h2>

      <form class="filters">
        <label class="filter">
          <input type="checkbox" name="level" value="beginner">
          Початковий рівень
        </label>

        <label class="filter">
          <input type="checkbox" name="level" value="advanced">
          Просунутий рівень
        </label>

        <label class="filter">
          <input type="checkbox" name="format" value="practice">
          Практичні курси
        </label>
      </form>
    </aside>

    <main class="main-content" id="courses">
      <header class="content-header">
        <div>
          <h1>Курси для розробників</h1>
          <p>Оберіть напрям і розвивайте практичні навички.</p>
        </div>

        <label>
          <span class="visually-hidden">Сортування</span>
          <select class="sort-control" name="sort">
            <option>За популярністю</option>
            <option>За складністю</option>
            <option>За тривалістю</option>
          </select>
        </label>
      </header>

      <section class="card-list" aria-label="Список курсів">
        <article class="card">
          <div class="card-content">
            <h2>HTML та CSS</h2>
            <div class="card-meta">
              <span>12 уроків</span>
              <span>Просунутий</span>
            </div>
            <p>
              Створення адаптивних інтерфейсів, компонентів і складних макетів.
            </p>
            <a class="card-action" href="#html-css">Переглянути курс</a>
          </div>
        </article>

        <article class="card">
          <div class="card-content">
            <h2>JavaScript</h2>
            <div class="card-meta">
              <span>18 уроків</span>
              <span>Середній</span>
            </div>
            <p>
              Робота з даними, подіями та логікою сучасних вебзастосунків.
            </p>
            <a class="card-action" href="#javascript">Переглянути курс</a>
          </div>
        </article>

        <article class="card">
          <div class="card-content">
            <h2>Доступність</h2>
            <div class="card-meta">
              <span>8 уроків</span>
              <span>Середній</span>
            </div>
            <p>
              Практики створення інтерфейсів, доступних для різних користувачів.
            </p>
            <a class="card-action" href="#accessibility">Переглянути курс</a>
          </div>
        </article>
      </section>
    </main>
  </div>
</body>
</html>

Практичні макети з Flexbox

Вступ

Базова модель Flexbox

Адаптивна навігація

HTML-структура

Розподіл простору

Перенесення елементів

Адаптивні картки

Розміщення карток

Однакова висота карток

Макет із бічною панеллю

Чому потрібен `min-width: 0`

Вкладені flex-контейнери

Повний приклад

Налаштування рядків і колонок

Порядок елементів

Типові помилки

Відсутній `flex-wrap`

Використання `width` замість flex-правил

Неправильне застосування `height: 100%`

Горизонтальне переповнення

Неправильна вісь для `justify-content`

Заміна семантичного порядку через `order`

Підсумок

Практичні макети з Flexbox

Вступ

Базова модель Flexbox

Адаптивна навігація

HTML-структура

Розподіл простору

Перенесення елементів

Адаптивні картки

Розміщення карток

Однакова висота карток

Макет із бічною панеллю

Чому потрібен min-width: 0

Вкладені flex-контейнери

Повний приклад

Налаштування рядків і колонок

Порядок елементів

Типові помилки

Відсутній flex-wrap

Використання width замість flex-правил

Неправильне застосування height: 100%

Горизонтальне переповнення

Неправильна вісь для justify-content

Заміна семантичного порядку через order

Підсумок

Чому потрібен `min-width: 0`

Відсутній `flex-wrap`

Використання `width` замість flex-правил

Неправильне застосування `height: 100%`

Неправильна вісь для `justify-content`

Заміна семантичного порядку через `order`