Пошук уроків, статей та іншого контенту
Визначайте, як елементи стискаються за нестачі місця, налаштовуючи властивість flex-shrink.
flex-shrinkВластивість flex-shrink визначає, наскільки flex-елемент може стискатися, коли всередині flex-контейнера недостатньо вільного місця.
.item {
flex-shrink: 1;
}Значення за замовчуванням — 1, тому flex-елементи зазвичай можуть стискатися автоматично.
<div class="container">
<div class="item item-a">Елемент A</div>
<div class="item item-b">Елемент B</div>
<div class="item item-c">Елемент C</div>
</div>.container {
display: flex;
width: 500px;
border: 2px solid #333;
}
.item {
flex-basis: 250px;
padding: 20px;
border: 2px solid steelblue;
box-sizing: border-box;
}Три елементи мають базову ширину 250px. Разом їм потрібно 750px, але контейнер має лише 500px. Оскільки flex-shrink дорівнює 1, браузер зменшить ширину елементів, щоб вони помістилися в контейнер.
flex-shrinkflex-shrink приймає невід’ємне числове значення:
.item {
flex-shrink: 0;
}0 — елемент не стискається;
1 — стандартний рівень стискання;
2, 3 та інші значення — елемент бере участь у розподілі нестачі місця з більшою вагою.
Значення не задає конкретну ширину. Воно визначає частку участі елемента в стисканні.
flex-shrink: 0Якщо елемент не повинен ставати меншим за свою базову ширину, для нього потрібно встановити flex-shrink: 0.
<div class="toolbar">
<button class="logo">Мій сайт</button>
<input class="search" type="text" placeholder="Пошук">
<button class="menu">Меню</button>
</div>.toolbar {
display: flex;
gap: 12px;
width: 360px;
padding: 12px;
border: 2px solid #333;
box-sizing: border-box;
}
.logo,
.menu {
flex-shrink: 0;
}
.logo {
width: 120px;
}
.menu {
width: 80px;
}
.search {
min-width: 0;
flex: 1 1 auto;
}Кнопки не стискаються, а поле пошуку займає весь залишок простору. Якщо поле не має достатньо місця, воно зменшується замість кнопок.
Браузер не просто віднімає однакову кількість пікселів від кожного елемента. Для розподілу нестачі місця враховуються:
базовий розмір елемента;
значення flex-shrink;
мінімальні та максимальні обмеження розміру.
Наприклад:
<div class="container">
<div class="box first">Перший елемент</div>
<div class="box second">Другий елемент</div>
</div>.container {
display: flex;
width: 500px;
border: 2px solid #333;
}
.box {
box-sizing: border-box;
padding: 16px;
border: 2px solid darkorange;
}
.first {
flex-basis: 300px;
flex-shrink: 1;
}
.second {
flex-basis: 300px;
flex-shrink: 2;
}Сумарна базова ширина дорівнює 600px, а контейнер має 500px. Другий елемент має більший коефіцієнт стискання, тому він стискатиметься сильніше.
Однак flex-shrink: 2 не означає, що елемент обов’язково стане вдвічі вужчим. Це коефіцієнт для розрахунку розподілу нестачі, а не прямий множник ширини.
flex-shrink і flex-basisВластивість flex-shrink працює разом із базовим розміром елемента, який задається через flex-basis.
.item {
flex-basis: 300px;
flex-shrink: 1;
}У цьому випадку браузер спочатку розглядає елемент як такий, що має базову ширину 300px, а потім за потреби стискає його.
Якщо використовується flex-basis: 0, усі елементи починають розподіл простору з нульового базового розміру:
.item {
flex: 1 1 0;
}Для властивості flex-shrink важливо розрізняти:
.item {
flex-shrink: 0;
}і
.item {
flex: 1 0 auto;
}У другому записі значення означають:
flex-grow: 1;
flex-shrink: 0;
flex-basis: auto.
Тобто елемент може розширюватися, але не стискається.
У наступному прикладі перша частина містить заголовок і опис, а кнопка повинна залишатися доступною для натискання:
<!doctype html>
<html lang="uk">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>flex-shrink</title>
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
padding: 24px;
font-family: sans-serif;
background: #f3f4f6;
}
.card {
display: flex;
gap: 16px;
max-width: 560px;
margin: 0 auto;
padding: 16px;
border: 1px solid #d1d5db;
border-radius: 12px;
background: white;
}
.content {
min-width: 0;
flex: 1 1 auto;
}
.title {
margin: 0 0 8px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.description {
margin: 0;
color: #4b5563;
}
.button {
flex: 0 0 auto;
padding: 10px 16px;
border: 0;
border-radius: 6px;
color: white;
background: #2563eb;
cursor: pointer;
}
.button:hover {
background: #1d4ed8;
}
</style>
</head>
<body>
<article class="card">
<div class="content">
<h2 class="title">Дуже довгий заголовок картки, який може не поміститися</h2>
<p class="description">
Опис стискається разом із контейнером, а кнопка зберігає свою ширину.
</p>
</div>
<button class="button" type="button">Детальніше</button>
</article>
</body>
</html>У цьому прикладі:
.content має flex: 1 1 auto, тому може займати доступний простір і стискатися;
.button має flex: 0 0 auto, тому не стискається;
min-width: 0 дозволяє .content бути вужчим за мінімальну ширину його вмісту;
overflow: hidden і text-overflow: ellipsis скорочують надто довгий заголовок.
min-width: 0 і мінімальна ширинаУ flex-контейнерах flex-елемент за замовчуванням може мати мінімальну ширину на основі свого вмісту. Через це елемент іноді не стискається так, як очікується.
Типова ситуація — довгий текст або URL:
.content {
flex: 1 1 auto;
min-width: 0;
}min-width: 0 дозволяє елементу справді зменшуватися. Без цього довгий нерозривний вміст може змусити контейнер розширитися або спричинити горизонтальне переповнення.
Це не заміна flex-shrink: 0. Властивості відповідають за різні речі:
flex-shrink: 0 забороняє елементу стискатися;
min-width: 0 дозволяє елементу стискатися до ширини, меншої за мінімальну ширину його вмісту.
flex-shrink: 0Цю властивість доречно застосовувати до елементів, які мають зберігати розмір:
кнопок;
іконок;
логотипів;
перемикачів;
аватарів;
елементів керування навігацією.
.icon {
width: 40px;
height: 40px;
flex: 0 0 40px;
}У цьому скороченому записі:
flex-grow: 0;
flex-shrink: 0;
flex-basis: 40px.
Іконка не розширюється і не стискається.
Для текстових або основних інформаційних блоків зазвичай підходить стандартне стискання:
.text {
flex: 1 1 auto;
min-width: 0;
}flex-shrink задає ширину.item {
flex-shrink: 2;
}Цей запис не встановлює ширину елемента і не робить його автоматично вдвічі меншим. Щоб задати початковий розмір, використовуйте width або flex-basis.
.item {
flex-shrink: 0;
}Якщо встановити це значення кожному елементу, їхня сумарна ширина може перевищити ширину контейнера. У результаті з’явиться переповнення.
Забороняйте стискання лише для тих елементів, яким справді потрібен фіксований розмір.
width замість керування flex-розміромwidth може бути початковим розміром, але flex-алгоритм усе одно враховує flex-basis. Для явного керування базовим розміром краще використовувати:
.item {
flex-basis: 240px;
flex-shrink: 1;
}min-width: 0Якщо flex-елемент із текстом не стискається і виходить за межі контейнера, перевірте його мінімальну ширину:
.content {
min-width: 0;
}flex-shrink і overflowflex-shrink визначає, чи може сам flex-елемент зменшуватися. overflow визначає, що робити з вмістом, який не поміщається всередині елемента. Часто для правильного результату потрібні обидві властивості, але вони не замінюють одна одну.
flex-shrink визначає, як flex-елемент стискається за нестачі місця.
Значення за замовчуванням — 1.
flex-shrink: 0 забороняє стискання.
Більше значення означає більшу участь у розподілі нестачі місця, але не задає прямий відсоток ширини.
Розрахунок стискання враховує flex-basis і мінімальні обмеження.
Для текстових flex-елементів часто потрібен min-width: 0.
Для кнопок, іконок і логотипів можна використовувати flex-shrink: 0 або flex: 0 0 auto.