Пошук уроків, статей та іншого контенту
Задавайте початковий розмір flex-елемента вздовж головної осі за допомогою властивості flex-basis.
flex-basisВластивість flex-basis задає початковий розмір flex-елемента вздовж головної осі контейнера.
Головна вісь залежить від значення flex-direction:
за flex-direction: row — горизонтальна вісь, тому flex-basis визначає початкову ширину;
за flex-direction: column — вертикальна вісь, тому flex-basis визначає початкову висоту.
.item {
flex-basis: 200px;
}Це означає: перед розподілом вільного простору елемент починається з розміру 200px уздовж головної осі.
flex-basis не завжди задає остаточний розмір. Якщо елементи можуть розширюватися або стискатися, властивості flex-grow і flex-shrink можуть змінити цей розмір.
.item {
flex-basis: auto;
}Основні значення:
auto — початковий розмір береться з відповідної властивості розміру, наприклад width або height;
довжина — наприклад 200px, 30%, 20rem;
0 — ігнорувати початковий розмір вмісту й почати розподіл простору з нульового базового розміру;
content — розмір визначається вмістом елемента.
Найчастіше використовують auto, 0 або конкретну довжину.
flex-basis і головна вісьРозглянемо горизонтальний flex-контейнер:
<div class="row">
<div class="item">Перший елемент</div>
<div class="item">Другий елемент</div>
</div>.row {
display: flex;
width: 600px;
border: 2px solid #333;
}
.item {
flex-basis: 200px;
border: 2px solid #2563eb;
padding: 16px;
}За flex-direction: row кожен елемент має початкову ширину 200px. Отже, два елементи разом займають 400px, а в контейнері залишається ще 200px вільного простору.
За замовчуванням flex-grow дорівнює 0, тому елементи не розтягнуться автоматично на весь контейнер.
.item {
flex-basis: 200px;
flex-grow: 1;
}Тепер вільний простір буде розподілено між елементами. Кожен елемент отримає додатково по 100px, тому його підсумкова ширина буде приблизно 300px.
flex-basis у вертикальному контейнеріЯкщо головна вісь вертикальна, властивість визначає початкову висоту:
.column {
display: flex;
flex-direction: column;
height: 600px;
}
.item {
flex-basis: 150px;
}У цьому прикладі кожен flex-елемент починається з висоти 150px.
Отже, flex-basis не є синонімом width. Його напрямок залежить від головної осі:
/* Початковий горизонтальний розмір */
.row {
display: flex;
flex-direction: row;
}
/* Початковий вертикальний розмір */
.column {
display: flex;
flex-direction: column;
}autoЗначення auto є типовим для flex-basis.
.item {
width: 240px;
flex-basis: auto;
}За flex-direction: row браузер використовує width як початковий основний розмір елемента.
Для вертикального контейнера джерелом розміру може бути height:
.column .item {
height: 120px;
flex-basis: auto;
}Якщо для елемента не задано відповідну властивість розміру, початковий розмір може визначатися його вмістом.
flex-basis: 0 і flex-basis: autoЦі значення по-різному враховують початковий розмір елемента.
flex-basis: autoБраузер враховує width, height або розмір вмісту:
.item {
width: 300px;
flex-basis: auto;
flex-grow: 1;
}Елемент починає розподіл простору приблизно від 300px.
flex-basis: 0Браузер не використовує початкову ширину як базовий розмір:
.item {
width: 300px;
flex-basis: 0;
flex-grow: 1;
}У такому випадку простір розподіляється між елементами відповідно до їхніх значень flex-grow, ніби їхній початковий розмір уздовж головної осі дорівнює нулю.
Це корисно, коли потрібно створити колонки однакової ширини, навіть якщо в них різний за обсягом вміст.
<div class="cards">
<article class="card">
<h2>HTML</h2>
<p>Структура вебсторінки.</p>
</article>
<article class="card">
<h2>CSS</h2>
<p>Стилізація та компонування інтерфейсу з додатковим текстом.</p>
</article>
<article class="card">
<h2>JavaScript</h2>
<p>Поведінка вебсторінки.</p>
</article>
</div>.cards {
display: flex;
gap: 16px;
max-width: 900px;
margin: 0 auto;
}
.card {
flex: 1 1 0;
padding: 20px;
border: 1px solid #cbd5e1;
border-radius: 8px;
background-color: #f8fafc;
}
.card h2 {
margin-top: 0;
}У скороченому записі:
.card {
flex: 1 1 0;
}це означає:
.card {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
}Усі картки отримують однакову частку доступного простору, незалежно від довжини тексту.
Іноді елементи повинні мати різні початкові розміри:
<div class="layout">
<aside class="sidebar">Бічна панель</aside>
<main class="content">
<h1>Основний вміст</h1>
<p>Ця область займає весь простір, що залишився.</p>
</main>
</div>.layout {
display: flex;
gap: 24px;
max-width: 1000px;
margin: 0 auto;
}
.sidebar {
flex: 0 0 240px;
padding: 20px;
background-color: #e0f2fe;
}
.content {
flex: 1 1 auto;
padding: 20px;
background-color: #f1f5f9;
}Тут:
.sidebar {
flex: 0 0 240px;
}розкладається так:
.sidebar {
flex-grow: 0;
flex-shrink: 0;
flex-basis: 240px;
}Бічна панель:
починається з ширини 240px;
не розширюється;
не стискається.
Основний вміст:
.content {
flex: 1 1 auto;
}може розширюватися;
може стискатися;
початковий розмір визначається його вмістом або заданим розміром.
flex-basis у скороченій властивості flexВластивість flex об’єднує три властивості:
.item {
flex: flex-grow flex-shrink flex-basis;
}Наприклад:
.item {
flex: 1 1 200px;
}еквівалентно:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 200px;
}Поширені варіанти:
/* Елемент може розширюватися та стискатися, початковий розмір — 200px */
.item {
flex: 1 1 200px;
}
/* Елемент не розширюється і не стискається, розмір — 240px */
.item {
flex: 0 0 240px;
}
/* Елементи отримують однакові частки простору */
.item {
flex: 1;
}У випадку flex: 1 браузер застосовує значення, еквівалентне:
.item {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}Тому flex: 1 часто використовують для однакових колонок або кнопок.
flex-basis може бути заданий у відсотках. Відсоток обчислюється від розміру flex-контейнера вздовж головної осі.
.container {
display: flex;
width: 800px;
}
.item {
flex-basis: 50%;
}Початковий розмір кожного елемента становитиме 50% від ширини контейнера, тобто приблизно 400px.
Вільний простір, відступи та можливість стискання можуть вплинути на остаточний розмір.
flex-basis і box-sizingЯк і інші властивості розміру, flex-basis взаємодіє з box-sizing.
* {
box-sizing: border-box;
}
.item {
flex-basis: 240px;
padding: 20px;
border: 4px solid #334155;
}За box-sizing: border-box значення 240px включає вміст, внутрішні відступи та межі.
За box-sizing: content-box 240px стосується лише області вмісту, а padding і border збільшують фактичний розмір елемента.
min-widthFlex-елемент може не стискатися до очікуваного розміру через стандартне значення min-width: auto. Особливо це помітно, коли всередині є довгий текст або рядок без пробілів.
.content {
flex: 1 1 0;
min-width: 0;
}min-width: 0 дозволяє елементу справді стискатися в межах flex-контейнера.
Це не змінює початковий розмір, заданий flex-basis, але впливає на мінімальний допустимий розмір під час стискання.
Під час компонування flex-елементів зручно діяти так:
Визначте напрямок головної осі за допомогою flex-direction.
Задайте початковий розмір через flex-basis.
Визначте, чи може елемент розширюватися, за допомогою flex-grow.
Визначте, чи може він стискатися, за допомогою flex-shrink.
За потреби використайте скорочену властивість flex.
Наприклад:
.panel {
display: flex;
flex-direction: row;
}
.panel__navigation {
flex: 0 0 220px;
}
.panel__main {
flex: 1 1 auto;
min-width: 0;
}Навігація має фіксований початковий розмір, а основна область займає залишок простору.
flex-basis замість висоти у вертикальному напрямку.container {
display: flex;
flex-direction: column;
}
.item {
flex-basis: 200px;
}Тут 200px — це початкова висота, а не ширина. Напрямок визначається головною віссю контейнера.
.item {
flex-basis: 300px;
flex-shrink: 1;
}Значення 300px є початковим, а не обов’язково остаточним. Якщо контейнер замалий, елемент може стиснутися.
Для незмінного розміру потрібно вимкнути розширення та стискання:
.item {
flex: 0 0 300px;
}flex-basis: auto і flex-basis: 0.first {
width: 300px;
flex: 1 1 auto;
}
.second {
width: 300px;
flex: 1 1 0;
}У першому випадку ширина 300px впливає на розподіл простору. У другому випадку базовий розмір дорівнює нулю, тому простір розподіляється переважно за значенням flex-grow.
min-width: 0Якщо flex-елемент містить довгий текст, він може не стискатися до ширини, яку очікує розробник.
.content {
flex: 1 1 0;
min-width: 0;
}Додайте min-width: 0, коли вміст має дозволяти стискання.
flex-basis задає початковий розмір flex-елемента вздовж головної осі.
За flex-direction: row він визначає початкову ширину.
За flex-direction: column він визначає початкову висоту.
auto враховує width, height або розмір вмісту.
0 ігнорує початковий розмір вмісту під час розподілу простору.
flex-basis задає початковий, а не обов’язково остаточний розмір.
Остаточний розмір також залежить від flex-grow, flex-shrink, обмежень min-width і max-width.
У властивості flex flex-basis є третім значенням: flex-grow flex-shrink flex-basis.
Для однакових колонок часто використовують flex: 1.
Для фіксованого flex-елемента використовують конструкцію на кшталт flex: 0 0 240px.