Урок 85 із 104
82%
← Назад

Розмір flex-елемента вздовж головної осі

Вивчаємо властивість flex-basis, яка задає початковий розмір flex-елемента вздовж головної осі. Розглядаємо її роботу при горизонтальній та вертикальній орієнтації flex-контейнера, а також пріоритет над width і height.

Властивості width і height у flex-моделі

Властивості width і height задають ширину та висоту flex-елемента незалежно від напрямку головної осі. Якщо головна вісь горизонтальна, width задає ширину елемента. Якщо головна вісь вертикальна, width все одно залишається шириною, а не розміром уздовж головної осі.

Іноді зручніше задавати не конкретно ширину або висоту, а розмір елемента саме вздовж головної осі. Для цього у flex-моделі використовується властивість flex-basis.

Властивість flex-basis

Властивість flex-basis задає початковий розмір flex-елемента вздовж головної осі контейнера.

  • Якщо головна вісь горизонтальна (flex-direction: row), flex-basis задає початкову ширину елемента.
  • Якщо головна вісь вертикальна (flex-direction: column), flex-basis задає початкову висоту елемента.
  • flex-basis задається безпосередньо flex-елементу, а не flex-контейнеру.
❗ Важливо:

Головна ідея flex-basis: властивість задає розмір не конкретно по горизонталі або вертикалі, а саме вздовж головної осі flex-контейнера.

flex-basis при горизонтальній осі

За замовчуванням flex-контейнер використовує flex-direction: row, тому його головна вісь є горизонтальною. У такому випадку flex-basis визначає початкову ширину flex-елемента.


<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
</div>

.parent {
  display: flex;
  flex-direction: row;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

.child {
  flex-basis: 50px;
  border: 1px solid green;
}

flex-basis при вертикальній осі

Якщо встановити flex-direction: column, головна вісь стане вертикальною. При цьому значення flex-basis залишиться 50px, але тепер воно задаватиме початковий розмір елемента вздовж вертикальної осі, тобто висоту.


.parent {
  display: flex;
  flex-direction: column;
  width: 300px;
  height: 300px;
  border: 1px solid red;
}

.child {
  flex-basis: 50px;
  border: 1px solid green;
}

flex-basis і width

Якщо головна вісь горизонтальна і flex-елемент одночасно має flex-basis та width, значення flex-basis використовується як базовий розмір уздовж головної осі. Тому width не визначає базовий розмір елемента замість flex-basis.


.parent {
  display: flex;
}

.child {
  width: 200px;
  flex-basis: 100px;
}

flex-basis і height

Якщо головна вісь вертикальна і flex-елемент одночасно має flex-basis та height, flex-basis використовується як базовий розмір уздовж головної осі.


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

.child {
  height: 200px;
  flex-basis: 100px;
}
❗ Важливо:

Запам'ятайте: flex-basis залежить від напрямку головної осі. При row він працює вздовж горизонтальної осі, а при column — вздовж вертикальної.

Практичне завдання 1

📌 Завдання:
  1. Створіть flex-контейнер із п'ятьма flex-елементами.
  2. Задайте всім елементам flex-basis: 100px.
  3. Зробіть головну вісь горизонтальною.
  4. Подивіться, який розмір елементи отримали вздовж головної осі.
  5. Змініть напрямок на вертикальний за допомогою flex-direction: column.
  6. Порівняйте поведінку елементів у двох напрямках.

<!-- Початковий код -->
<div class="parent">
  <div class="child">1</div>
  <div class="child">2</div>
  <div class="child">3</div>
  <div class="child">4</div>
  <div class="child">5</div>
</div>
💡 Показати підказку

Задайте батьківському елементу display: flex;, а дочірнім елементам flex-basis: 100px;. Для перевірки різних напрямків змінюйте flex-direction: row та flex-direction: column.

✅ Показати відповідь

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

.child {
  flex-basis: 100px;
  border: 1px solid green;
}

Практичне завдання 2

📌 Завдання:
  1. Створіть flex-контейнер із кількома елементами.
  2. Задайте контейнеру горизонтальну головну вісь.
  3. Для flex-елемента одночасно задайте width: 200px; та flex-basis: 100px;.
  4. Перевірте, який базовий розмір елемента буде використано.
  5. Поясніть, чому flex-basis має пріоритет над width уздовж головної осі.

<!-- Початковий код -->
<div class="parent">
  <div class="child">Елемент</div>
</div>
💡 Показати підказку

Використайте flex-direction: row;, а для дочірнього елемента одночасно задайте width: 200px; та flex-basis: 100px;.

✅ Показати відповідь

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

.child {
  width: 200px;
  flex-basis: 100px;
  border: 1px solid green;
}

Практичне завдання 3

📌 Завдання:
  1. Створіть flex-контейнер.
  2. Зробіть головну вісь вертикальною.
  3. Для flex-елемента задайте height: 200px;.
  4. Додайте flex-basis: 100px;.
  5. Перевірте, який базовий розмір елемента використовується вздовж вертикальної осі.

<!-- Початковий код -->
<div class="parent">
  <div class="child">Елемент</div>
</div>
💡 Показати підказку

Встановіть flex-direction: column; у контейнера. Для дочірнього елемента використайте одночасно height: 200px; та flex-basis: 100px;.

✅ Показати відповідь

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

.child {
  height: 200px;
  flex-basis: 100px;
  border: 1px solid green;
}