EasyCode365EasyCode365

Вступ до CSS Flexbox

Flexbox — це CSS-інструмент для layout, який розташовує елементи в ряд або колонку.

Він допомагає ставити блоки поруч, центрувати контент, додавати рівні відступи, переносити елементи на новий рядок і ділити доступний простір між елементами.

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

Навіщо існує Flexbox

До Flexbox розробники часто використовували floats, inline-block або positioning для створення layouts.

Ці інструменти можуть працювати, але вони не були створені для гнучкого layout інтерфейсів. Flexbox створили, щоб спростити одновимірні layouts.

Один вимір означає layout в одному основному напрямку за раз:

  • ряд
  • колонка

Для повних двовимірних layouts сторінки CSS Grid часто кращий інструмент. Для рядів, колонок, навігаційних панелей, toolbars і груп карток Flexbox зазвичай дуже сильний вибір.

Що таке flex container

Flex container — це батьківський елемент, який керує Flexbox layout.

Його створюють, додаючи display: flex до батьківського елемента.

Лише читання

Контейнер вирішує, як його прямі дочірні елементи розміщуються, відділяються, вирівнюються та змінюють розмір.

Що таке flex items

Flex items — це прямі дочірні елементи flex container.

Лише прямі діти стають flex items. Елементи, вкладені глибше всередині цих дітей, не є flex items, якщо їхній власний батьківський елемент також не використовує display: flex.

Лише читання
<div class="container">
  <div>Flex item</div>
  <div>Flex item</div>
</div>

Батьківський елемент — це flex container. Два прямі дочірні <div> — це flex items.

Увімкнення Flexbox через display: flex

Найменший приклад Flexbox потребує одного правила на батьківському елементі: display: flex.

За замовчуванням flex items стають в один ряд.

Можна редагувати
<div class="container">
  <div class="box">Блок 1</div>
  <div class="box">Блок 2</div>
  <div class="box">Блок 3</div>
</div>

<style>
  .container {
    display: flex;
    padding: 12px;
    background-color: #e5e7eb;
    font-family: Arial, sans-serif;
  }

  .box {
    padding: 16px;
    margin: 4px;
    background-color: #2563eb;
    color: white;
    border-radius: 6px;
  }
</style>

Три блоки стають у ряд, бо батьківський елемент тепер flex container.

Main axis і cross axis

Flexbox використовує два важливі напрямки:

  • Main axis — це напрямок, у якому йдуть flex items.
  • Cross axis — це напрямок поперек main axis.

Зі стандартним flex-direction: row main axis іде зліва направо, а cross axis — зверху вниз.

Якщо змінити на flex-direction: column, осі міняються. Main axis стає вертикальним, а cross axis — горизонтальним.

Напрямок через flex-direction

Властивість flex-direction керує основним напрямком flex items.

Поширені значення:

  • row: елементи стоять у горизонтальному ряду. Це значення за замовчуванням.
  • column: елементи складаються у вертикальну колонку.
Можна редагувати
<div class="row-layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<div class="column-layout">
  <div class="item">1</div>
  <div class="item">2</div>
  <div class="item">3</div>
</div>

<style>
  .row-layout,
  .column-layout {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .row-layout {
    flex-direction: row;
    align-items: flex-start;
  }

  .column-layout {
    flex-direction: column;
    align-items: flex-start;
  }

  .item {
    padding: 12px;
    background-color: #dbeafe;
    border: 1px solid #2563eb;
    text-align: center;
  }
</style>

Зміна flex-direction змінює main axis, а це також змінює те, як працює вирівнювання.

У цьому прикладі використовується align-items: flex-start, щоб елементи в колонці зберігали природну ширину замість розтягування на весь контейнер.

Вирівнювання по main axis через justify-content

justify-content вирівнює flex items уздовж main axis.

Зі стандартним напрямком row це зазвичай означає горизонтальне вирівнювання.

Поширені значення:

  • flex-start: елементи залишаються на початку.
  • center: елементи переміщуються в центр.
  • flex-end: елементи переміщуються в кінець.
  • space-between: перший елемент іде на початок, останній — у кінець, а простір розподіляється між ними.
  • space-around: кожен елемент отримує однаковий простір навколо себе.
  • space-evenly: простір між елементами і по краях однаковий.
Можна редагувати
<div class="toolbar">
  <button>Назад</button>
  <button>Зберегти</button>
  <button>Далі</button>
</div>

<style>
  .toolbar {
    display: flex;
    justify-content: space-between;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .toolbar button {
    padding: 8px 12px;
  }
</style>

Спробуй змінити space-between на center, щоб побачити, як кнопки рухаються вздовж main axis.

Вирівнювання по cross axis через align-items

align-items вирівнює flex items уздовж cross axis.

Зі стандартним напрямком row це зазвичай означає вертикальне вирівнювання.

За замовчуванням align-items має значення stretch, через що елементи ростуть і заповнюють cross axis (наприклад, однакова висота в ряду). Встанови значення на кшталт center, щоб вирівняти елементи без розтягування.

Можна редагувати
<div class="panel">
  <div class="tile small">Малий</div>
  <div class="tile tall">Високий</div>
  <div class="tile small">Малий</div>
</div>

<style>
  .panel {
    display: flex;
    align-items: center;
    gap: 8px;
    height: 140px;
    padding: 12px;
    background-color: #f3f4f6;
    font-family: Arial, sans-serif;
  }

  .tile {
    width: 80px;
    display: grid;
    place-items: center;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
  }

  .small {
    height: 48px;
  }

  .tall {
    height: 96px;
  }
</style>

Елементи вертикально центровані, бо align-items працює поперек основного напрямку.

Відступи через gap

Властивість gap додає простір між flex items.

Зазвичай це чистіше, ніж додавати margins до кожного елемента.

Можна редагувати
<div class="link-row">
  <span>HTML</span>
  <span>CSS</span>
  <span>JavaScript</span>
</div>

<style>
  .link-row {
    display: flex;
    gap: 12px;
    font-family: Arial, sans-serif;
  }

  .link-row span {
    padding: 8px 12px;
    background-color: #eef2ff;
    border: 1px solid #4f46e5;
    border-radius: 999px;
  }
</style>

gap створює простір лише між елементами. Він не додає додатковий простір перед першим елементом або після останнього.

Перенесення через flex-wrap

За замовчуванням flex items намагаються залишатися в одному рядку.

Якщо контейнер стає занадто вузьким, елементи можуть стискатися або виходити за межі. Використовуй flex-wrap: wrap, щоб дозволити елементам переходити на нові рядки.

Можна редагувати
<div class="badge-list">
  <span>Selectors</span>
  <span>Box model</span>
  <span>Typography</span>
  <span>Forms</span>
  <span>Flexbox</span>
</div>

<style>
  .badge-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    max-width: 260px;
    font-family: Arial, sans-serif;
    background: #cccccc;
  }

  .badge-list span {
    padding: 8px 12px;
    background-color: #fef3c7;
    border: 1px solid #d97706;
    border-radius: 999px;
  }
</style>

Wrapping корисний для tags, груп кнопок і рядів карток, які мають працювати на менших екранах.

Пропорції через flex

Властивість flex керує тим, як flex items ростуть і стискаються.

Простий патерн для початківців — flex: 1. Якщо всі елементи використовують flex: 1, вони однаково ділять доступний простір.

Можна редагувати
<div class="columns">
  <div class="column">Один</div>
  <div class="column">Два</div>
  <div class="column">Три</div>
</div>

<style>
  .columns {
    display: flex;
    gap: 10px;
    font-family: Arial, sans-serif;
  }

  .column {
    flex: 1;
    padding: 20px;
    background-color: #dcfce7;
    border: 1px solid #16a34a;
    text-align: center;
  }
</style>

Кожна колонка займає рівну частину рядка.

Поширені помилки початківців

  • Ставити властивості контейнера на елемент: justify-content, align-items, gap і flex-wrap зазвичай належать flex container.
  • Забувати, що осі можуть змінюватися: justify-content іде вздовж main axis, а не завжди горизонтально.
  • Очікувати, що кожен вкладений елемент буде flex item: лише прямі діти flex container стають flex items.
  • Використовувати margins замість gap: gap простіший для відступів між flex items.
  • Використовувати Flexbox для кожного layout: Flexbox чудовий для одного напрямку. Grid часто кращий для двовимірних layouts.

Мініпрактика

Подивись на це CSS-правило:

Лише читання

Якщо всередині .menu є дві кнопки, де вони з'являться?

Перевір відповіді у quiz, коли будеш готовий.

Короткий quiz з відповідями

  1. Яка CSS-властивість перетворює батьківський елемент на flex container?
  2. align-items працює вздовж main axis чи cross axis?
  3. Яка властивість дозволяє flex items переходити на новий рядок?

Відповіді:

  1. display: flex.
  2. Cross axis.
  3. flex-wrap.

Відповідь на мініпрактику: перша кнопка рухається на початок контейнера, а друга — в кінець, із порожнім простором між ними.

Невеликий виклик

Створи просту навігаційну панель із Flexbox.

Твої цілі:

  • Перетвори .navbar на flex container.
  • Посунь посилання до правого боку.
  • Додай gap 15px між посиланнями.
Можна редагувати
<nav class="navbar">
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Головна</a>
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Про нас</a>
  <a href="https://www.easycode365.com/" target="_blank" class="nav-link">Контакти</a>
</nav>

<style>
  .navbar {
    padding: 20px;
    background-color: #1f2937;
    font-family: Arial, sans-serif;
    /* Увімкни Flexbox */

    /* Посунь посилання праворуч */

    /* Додай gap 15px */
  }

  .nav-link {
    color: white;
    text-decoration: none;
    font-weight: bold;
  }
</style>

Підсумок

  • display: flex перетворює батьківський елемент на flex container.
  • Прямі діти flex container стають flex items.
  • Flexbox працює в одному основному напрямку за раз: ряд або колонка.
  • Main axis слідує за flex-direction.
  • Cross axis проходить поперек main axis.
  • justify-content вирівнює елементи вздовж main axis.
  • align-items вирівнює елементи вздовж cross axis.
  • gap створює чистий простір між flex items.
  • flex-wrap: wrap дозволяє елементам переходити на нові рядки.
  • flex: 1 дозволяє елементам однаково ділити доступний простір.
  • Flexbox кращий за floats для багатьох одновимірних layouts, але Grid часто кращий для двовимірних layouts.