display flex и inline-flex

display: flex создаёт блочный flex-контейнер (занимает всю доступную ширину), а display: inline-flex — строчный flex-контейнер (ширина по содержимому), при этом оба превращают прямых потомков в flex-элементы.

Зачем нужно

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

Где используется

  • flex — навбар, карточки, секции страницы, формы
  • inline-flex — кнопки с иконкой, бейджи, теги в строке текста

display: flex — блочный контейнер

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* navbar занимает всю ширину родителя */

<nav class="navbar">
  <a href="/">Лого</a>
  <div>Ссылки</div>
</nav>
<p>Навбар — на своей строке, параграф — на следующей</p>

display: inline-flex — строчный контейнер

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: 999px;
  background: #e2e8f0;
  font-size: 0.75rem;
}

<p>
  Статус: <span class="badge">
    <svg width="8" height="8">...</svg>
    Активен
  </span>
</p>
<!-- badge — в строке с текстом "Статус:" -->

Сравнение

/* flex — блочный: отдельная строка, ширина 100% */
.flex-block {
  display: flex;
  background: #f0f9ff;
}

/* inline-flex — строчный: в потоке текста, ширина по контенту */
.flex-inline {
  display: inline-flex;
  background: #f0fdf4;
}

<p>Текст до <span class="flex-inline">ряд иконок</span> текст после.</p>
<div class="flex-block">Блочный контейнер на всю строку</div>

Внутреннее поведение одинаково

Оба значения одинаково работают с flex-свойствами контейнера и элементов:

.btn {
  display: inline-flex;  /* или flex — внутри то же самое */
  align-items: center;
  gap: 8px;
}

.btn svg {
  /* Это flex-элемент в обоих случаях */
  flex-shrink: 0;
}

Частые ошибки

  1. inline-flex на блочном элементе — технически работает, но <div> с inline-flex будет вести себя как строчный элемент — может быть неожиданно
  2. Применение к самому элементу, а не потомкам — display: flex делает flex-контейнером сам элемент; его дети — flex-элементы; внуки — нет
  3. flex vs inline-flex для кнопки — кнопка с display: flex займёт всю ширину строки; для кнопки обычно нужен inline-flex

Связанные темы

Ресурсы