What does display: inline-flex do compared to display: flex?

inline-flex makes a flex container that flows inline alongside surrounding text, whereas flex makes a block-level container that takes the full width and starts on its own line.

The inside of the container behaves identically — children become flex items either way. The difference is how the container itself participates in the outer layout: block (its own line, full width) versus inline (sits in the text flow next to other content).

.inline-container {
  display: inline-flex;  /* flows along with surrounding text */
}
.block-container {
  display: flex;         /* takes full width, breaks to a new line */
}

There's a matching display: inline-grid for CSS Grid.

When you'd want it: when a flex layout needs to sit mid-sentence or beside other inline elements — for instance, a small flex-arranged badge embedded in a line of running text, rather than a banner that claims the whole row.