Що таке display: inline-flex

Flexbox щільно увійшов у повсякденне верстання. display: flex знають і застосовують усі фронтендери. Але в цієї властивості є менш відомий двійник, display: inline-flex. Про нього пишуть рідко, а використовують ще рідше. І дарма.

Різниця зводиться до одного речення: inline-flex створює flex-контейнер, який сам поводиться як рядковий елемент. Нащадки всередині нього, звичайні flex-елементи з усіма можливостями Flexbox. А от батьківський елемент не займає всю доступну ширину рядка. Він підлаштовується під розмір вмісту і стає в один ряд із сусідніми елементами.

Ситуація точнісінько як із парою display: block і display: inline-block. Блоковий елемент забирає рядок цілком, рядковий, лише скільки потрібно контенту. Так і тут: flex задає блоковий flex-контейнер, а inline-flex задає рядковий.

На практиці це відкриває сценарії, які зі звичайним flex потребували б зайвих обгорток, хаків із шириною чи пережитків float.

💡 Швидкий огляд:

• display: inline-flex задає flex-контейнер, який поводиться як рядковий елемент і не займає весь рядок цілком. Ширина такого контейнера визначається вмістом, а не батьківським елементом.
• Усі flex-властивості працюють усередині inline-flex так само, як у звичайному display: flex. Жодних відмінностей у розкладці нащадків немає, різниця лише в зовнішній поведінці контейнера.
• Основний юзкейс: бейджі, теги та кнопки з іконками, де один inline-flex на елементі замінює зв’язку flex-батька та рядкового нащадка. Ви отримуєте центрування вмісту без зайвих обгорток.
• Інші значення display також мають інлайн-аналоги: inline-block, inline-table та inline-grid працюють за тим самим принципом. Внутрішня логіка розкладки зберігається, змінюється лише зовнішня поведінка контейнера.

Реальний кейс: бейджі з іконками

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

Якщо поставити бейджам display: flex, кожен із них розтягнеться на всю ширину батьківського елемента. Бейджі вишикуються в колонку, а не в рядок. Виправити це можна обгорткою з display: flex на батьківському елементі. Але навіщо зайвий враппер, якщо є inline-flex?

HTML-структура елементарна:

1
<div class="badges-list">
2
  <span class="c-badge">
3
    <svg class="c-icon" width="24" height="24">...</svg>
4
  </span>
5
  <span class="c-badge">
6
    <svg class="c-icon" width="24" height="24">...</svg>
7
  </span>
8
  <!-- остальные бейджи -->
9
</div>

Зверніть увагу: враппер .badges-list не робить нічого для інлайнового позиціювання. За це відповідає сам .c-badge.

CSS для бейджа:

1
.c-badge {
2
  display: inline-flex;
3
  justify-content: center;
4
  align-items: center;
5
}

Усе. Кожен бейдж — це flex-контейнер із рядковою поведінкою. Іконка всередині центрується за допомогою justify-content і align-items. Самі бейджі вишиковуються в рядок і переносяться на новий, якщо не вистачає ширини. Рівно те, що вимагав дизайн, без зайвих обгорток.

Inline-flex vs flex: наочне порівняння

Найкращий спосіб зрозуміти різницю, подивитися на два однакові набори контейнерів, один із display: flex, другий із display: inline-flex.

Приклад 1: display: flex

Три батьківські контейнери із синім тлом. Усередині кожного, три червоні нащадки з flex: 1. Батьківським елементам задано display: flex.

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

1
.container--flex {
2
  display: flex;
3
}
4
 
5
.container--flex > div {
6
  flex: 1;
7
}

Приклад 2: display: inline-flex

Ті самі три контейнери, але з display: inline-flex. Нащадкам додано min-width: 50px, щоб контейнер не схлопнувся в нуль.

1
.container--inline-flex {
2
  display: inline-flex;
3
}
4
 
5
.container--inline-flex > div {
6
  flex: 1;
7
  min-width: 50px;
8
}

Результат: контейнери стали в один ряд. Кожен займає рівно стільки ширини, скільки потрібно нащадкам (50px × 3 = 150px). Вони поводяться як слова в реченні, переносяться на наступний рядок, лише коли закінчується місце.

Ключовий висновок: для flex-елементів усередині контейнера різниці немає взагалі. Властивості на кшталт justify-content і align-items, а також gap і flex-direction працюють ідентично. Різниця лише в тому, як сам контейнер взаємодіє із зовнішнім світом. Як блок чи як рядок.

Коли варто застосовувати inline-flex: 4 сценарії

Не кожен макет потребує inline-flex. Але є ситуації, де він розв’язує задачу елегантніше, ніж комбінація flex + обгортка.

1. Список тегів або бейджів. Найчастіше застосування. Кожен тег — це flex-контейнер, усередині якого іконка й текст вирівняні по центру. Самі теги йдуть у рядок із переносом. inline-flex на тезі, і жодних врапперів.

2. Кнопки з іконкою в рядку тексту. Коли кнопка-дія (скопіювати, відкрити, видалити) стоїть прямо всередині абзацу чи заголовка. inline-flex дає змогу відцентрувати іконку всередині кнопки, не вириваючи кнопку з текстового потоку.

3. Інлайн-панель інструментів. Набір кнопок форматування у WYSIWYG-редакторі. Кожна кнопка — це inline-flex-контейнер з іконкою всередині. Усі кнопки стоять у рядок і переносяться природним чином.

4. Вертикальне центрування в рядковому контексті. Класичний CSS-біль: відцентрувати іконку по вертикалі відносно сусіднього тексту. vertical-align: middle працює через раз. inline-flex з align-items: center працює завжди.

Наведу код для сценаріїв 2 і 3, щоб не залишати їх на рівні теорії.

Кнопка з іконкою в тексті (сценарій 2). Припустімо, всередині абзацу потрібна кнопка «скопіювати». Вона зобов’язана залишитися в текстовому потоці й не зламати рядок. Ось мінімальний CSS:

1
.inline-action-btn {
2
  display: inline-flex;
3
  align-items: center;
4
  justify-content: center;
5
  width: 24px;
6
  height: 24px;
7
  border: none;
8
  background: transparent;
9
  cursor: pointer;
10
  vertical-align: middle;
11
}

Три рядки flexbox-центрування, і іконка всередині кнопки вирівняна по обох осях. Жодних line-height-хаків, жодних position: relative плюс transform. Кнопка сидить прямо в тексті, як ще одне слово.

Панель інструментів (сценарій 3). Типовий WYSIWYG-редактор: кнопки «жирний», «курсив», «посилання» стоять у рядок. Кожна кнопка — це inline-flex-контейнер:

1
.toolbar__btn {
2
  display: inline-flex;
3
  align-items: center;
4
  justify-content: center;
5
  width: 32px;
6
  height: 32px;
7
  border-radius: 4px;
8
}

Кнопки переносяться при звуженні вікна без додаткових врапперів. Для батьківської панелі підійде display: flex із flex-wrap: wrap і gap: 4px. Виходить дворівнева flex-композиція: зовнішній контейнер керує рядком кнопок, а кожна кнопка центрує свою іконку.

Підводні камені inline-flex

Три неочевидні ситуації, які економлять години в DevTools.

Пробіли між елементами. Як і inline-block, елементи з inline-flex чутливі до пробілів у HTML. Три <span> з inline-flex на окремих рядках отримають зазор у 4-5 пікселів. Лікується: font-size: 0 на батьківському елементі з відновленням на нащадках, видалення пробілів між тегами або зв’язка display: flex на батьківському елементі плюс inline-flex на нащадках.

text-align не працює на flex-нащадках. Для inline-block елементи вирівнюють через text-align: center на батьківському елементі. З inline-flex цей прийом працює, лише поки нащадки не стали flex-контейнерами. Flex-елементи не реагують на text-align. Вирівнюйте контейнери через justify-content на flex-батьківському елементі або margin: auto.

Flex-напрямок за замовчуванням. inline-flex, як і display: flex, за замовчуванням розкладає нащадків у рядок (flex-direction: row). Якщо очікуєте колонку всередині рядкового контейнера, задавайте flex-direction: column явно. Специфікація не читає думки верстальника.

Родичі: інші інлайн-варіанти display

У inline-flex є ідейні побратими. Майже кожне блокове значення display має рядковий аналог:

Механіка скрізь однакова: внутрішня логіка розкладки зберігається повністю, змінюється лише зовнішня поведінка контейнера. З inline-grid історія та сама — це грід-контейнер, який стає в рядок, а не на всю ширину батьківського елемента.

На практиці inline-flex використовують частіше за inline-grid. Причина проста: flex-контейнери частіше потрібні для дрібних компонентів (бейдж, кнопка, група іконок), де рядкова поведінка — це якраз те, що треба. Грід-розкладку частіше застосовують до великих структурних блоків, яким inline-поведінка ні до чого.

Браузерна підтримка в inline-flex практично повна. Властивість з’явилася в специфікації Flexible Box Layout Module Level 1 (кандидат у рекомендації W3C, 2016 рік) і працює в усіх сучасних браузерах: Chrome з 29-ї версії (2013), Firefox з 20-ї (2013), Safari з 9-ї (2015), Edge з 12-ї (2015). Internet Explorer 11 підтримує inline-flex із застереженнями, але за даними StatCounter на 2025 рік частка IE11 становить менш як 0.1% світового ринку. Для проєктів, які зобов’язані підтримувати IE11, inline-flex перевіряйте вручну: у частині багів із flex-basis і min-height цей браузер поводиться непередбачувано.

⁉️🤔 Часті запитання

У чому різниця між display: inline-flex і display: flex?

display: flex створює блоковий flex-контейнер, він займає всю доступну ширину рядка. display: inline-flex створює рядковий flex-контейнер, його ширина визначається вмістом, і він може стояти в одному рядку з іншими елементами. Для нащадків усередині контейнера різниці немає: усі flex-властивості працюють однаково в обох випадках.

Коли inline-flex краще, ніж inline-block?

inline-block не дає контролю над вирівнюванням нащадків. Якщо потрібно відцентрувати іконку всередині кнопки по вертикалі та горизонталі, inline-block змусить вас згадувати line-height-хаки та vertical-align. inline-flex із justify-content: center і align-items: center робить це без танців із бубном.

Чи можна використовувати gap з inline-flex?

Так, gap працює в inline-flex так само, як у звичайному flex. Ви задаєте проміжок між flex-елементами, і браузер застосовує його незалежно від того, блоковий контейнер чи рядковий. Підтримка gap у flexbox, усі сучасні браузери з 2021 року.

Чи впливає inline-flex на вкладені flex-контейнери?

Ні. Властивість display не успадковується. Якщо всередині inline-flex-контейнера лежить елемент із display: flex, він буде звичайним блоковим flex-контейнером. Рядкова поведінка стосується лише того елемента, якому ви явно задали inline-flex.

*inline-flex** і доступність, чи є підводні камені?*

Скринрідери не роблять відмінностей між flex і inline-flex. Обидва значення впливають лише на візуальну розкладку і не змінюють семантику чи порядок читання. Flex-властивість order змінює візуальний порядок, але не порядок у дереві доступності — це правильно для обох значень display.

Що ставити: flex чи inline-flex

Вибір зводиться до простого запитання: контейнер має стояти в рядку із сусідами чи зайняти всю ширину батьківського елемента?

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

Якщо верстаєте секцію, картку, шапку, футер або лейаут, залишайте display: flex. Блокова поведінка тут доречна: контейнер має зайняти свій рядок, а не вклинюватися між сусідніми елементами.

Золоте правило: заходьте в DevTools, дивіться на елемент. Якщо він у рядку з іншими, inline-flex. Якщо він на своєму рядку, flex. Простіше нікуди.