Что такое inline-flex в CSS: разница с flex и примеры использования

hannadev

Inline-flex в CSS — это значение свойства display, которое превращает элемент в флекс-контейнер, но с поведением строчного элемента. Оно помогает размещать блоки внутри текста без разрыва потока, сохраняя гибкость выравнивания.

Зачем это нужно? Обычный flex занимает всю ширину строки, как блочный элемент, и отталкивает соседей. Inline-flex же вписывается в строку, как span, но внутри управляет дочерними элементами по флекс-правилам. Это решает проблемы с встраиванием кнопок, иконок или меню в текст без лишних переносов.

Разница между flex и inline-flex

Flex делает элемент блочным: он растягивается на всю доступную ширину родителя и всегда начинается с новой строки. Последующие элементы в разметке переносятся вниз. Это удобно для полноценных секций страницы, как галереи или карточки товаров.

Inline-flex ведет себя как строчный элемент: занимает только ширину своего содержимого и вписывается в строку с текстом или другими inline-элементами. Внутри контейнера работают все флекс-свойства — justify-content, align-items и другие. Но снаружи он не ломает поток, как обычный div с flex.

Представьте строку текста с кнопками: с flex кнопки уйдут на новую строку, с inline-flex останутся рядом со словами. Это критично для навигации или форм в контенте.

Свойство	Поведение снаружи	Ширина	Пример использования
flex	Блочное	100% родителя	Полноширинные меню, сетки
inline-flex	Строчное	По содержимому	Кнопки в тексте, иконки

Flex: .container { display: flex; } — контейнер на новой строке, дети распределяются внутри.
Inline-flex: .container { display: inline-flex; } — контейнер в строке, дети выровнены флексом.
Нюанс: В inline-flex высота строки подстраивается под контейнер, как в inline-block.

Как работает inline-flex внутри контейнера

Внутри inline-flex контейнер — полноценный флексбокс с основной и поперечной осями. Свойство flex-direction определяет направление: row по умолчанию (слева направо), column (сверху вниз) или их reverse-варианты.

Дочерние элементы становятся флекс-айтемами и подчиняются justify-content для главной оси (по горизонтали в row) и align-items для поперечной (по вертикали). Можно добавить flex-wrap: wrap, чтобы элементы переносились.

Например, три кнопки в inline-flex-контейнере с justify-content: space-between равномерно распределятся, но весь блок впишется в абзац текста. Без wrap они сожмутся в одну строку.

Вот базовые свойства для настройки:

flex-direction: row — элементы в строку слева направо.
justify-content: center — центрирует по главной оси.
align-items: center — центрирует по поперечной оси.
Важно: gap добавляет отступы между элементами без лишнего HTML.

.container {
  display: inline-flex;
  gap: 10px;
  align-items: center;
}

Практические примеры inline-flex

Часто inline-flex используют для иконок с текстом: социальные кнопки в конце абзаца или поисковую форму в хедере. Контейнер занимает минимум места, но дети выровнены идеально.

Возьмем навигацию: ссылки должны стоять в строке внутри основного меню, не растягивая весь блок. С inline-flex + flex-wrap: nowrap они уместятся компактно. Если экран мал — добавьте media-запросы для column.

Ещё случай — карточки с метками: статусы задач (новое, в работе) рядом с заголовком. Inline-flex держит их в одной строке, justify-content управляет позицией.

Простой пример кода:

<p>Текст статьи. <span class="tags">#css #flexbox</span> Продолжение.</p>

.tags {
  display: inline-flex;
  gap: 5px;
  align-items: center;
}

Результат: теги встанут после текста без переноса.
Совет: Комбинируйте с order для смены порядка элементов на мобильных.
В таблицах статусов inline-flex упрощает выравнивание иконок.

Сценарий	CSS	Эффект
Кнопки в тексте	`display: inline-flex; gap: 8px;`	Компактный блок в строке
Иконки статуса	`align-items: center; justify-content: flex-end;`	Выровнены справа
Мини-меню	`flex-wrap: wrap; max-width: 200px;`	Перенос при нехватке места

Свойства флекс-айтемов в inline-flex

Каждый ребенок в inline-flex — флекс-айтем с свойствами flex-grow, flex-shrink, flex-basis. Шорткат flex: 1 растягивает поровну.

Например, две кнопки: одна flex: 1 (растягивается), вторая flex: 0 0 auto (по содержимому). Контейнер остается inline, не ломая текст вокруг.

Align-self переопределяет align-items для отдельного айтема: center, flex-start или stretch. Полезно для неравномерного контента.

Ключевые шорткаты:

flex: 1 — grow:1, shrink:1, basis:0% (растягивается).
flex: none — не растягивается, по содержимому.
flex: 0 0 auto — фиксированный размер.

Нюанс: В inline-flex flex-basis уважает размеры, но контейнер не выходит за строку.

Inline-flex и адаптивность

Inline-flex отлично работает в responsive: на десктопе — в строку, на мобильных меняйте flex-direction: column через media. Контейнер адаптирует ширину автоматически.

В сочетании с min-width или max-width предотвращает сжатие. Для сеток комбинируйте с grid, но inline-flex проще для линеек.

Пример: бейджи в профиле пользователя. На большом экране — inline-flex row, на маленьком — wrap или column.

@media (max-width: 768px) {
  .badges {
    flex-direction: column;
    align-items: stretch;
  }
}

Когда flex побеждает inline-flex

Flex лучше для полноэкранных: хедеры, футеры, где нужна вся ширина. Inline-flex — для вставок: кнопки «купить», звездочки рейтинга, теги.

Вложенные флексы работают одинаково, но следите за высотой строки — inline-flex может её увеличить. Тестируйте в разных браузерах.

Ограничения inline-flex: не меняет поведение vertical-align напрямую, но флекс-свойства компенсируют. Для сложных таблиц иногда возвращайтесь к block.

Другие аспекты флексбокса, как align-content для многолинейных или битые строки в wrap, требуют экспериментов в devtools. Стоит углубиться в комбинации с grid для гибридных макетов.