What does display: flex do?

HighIntermediateCss

By FrontendAtlas Team · Updated Apr 2, 2026

Quick Answer

Setting display: flex changes the display property so an element becomes a flex container for its direct children. The browser then lays out those flex items on one main axis and one cross axis, making alignment, spacing, and controlled growth or shrink behavior much easier than float-based layouts.

Answer

Overview

display: flex changes how the browser lays out an element's direct children. The parent becomes a flex container, the direct children become flex items, and the layout switches from normal block or inline flow to a one-dimensional flexbox layout. That means the browser can distribute free space, align items, and let them grow or shrink along a single axis without float hacks.

Display value	Outer behavior	Inner layout behavior	Typical use
display: flex	Behaves like a block-level box in surrounding layout	Creates a flex formatting context for direct children	Full-width toolbars, nav rows, page sections
display: inline-flex	Behaves like an inline-level box in surrounding layout	Still creates a flex formatting context for direct children	Small button groups or badge clusters inside text

Both values create flex containers; the difference is how the container itself participates in surrounding layout.

Parent vs. children

The important detail is that flexbox is a parent-child layout model. Setting the parent to flex does not automatically affect every nested descendant. Only the direct children become flex items. Those items can then be aligned with container properties like justify-content and align-items, while each item can control its own size behavior with item properties like flex, align-self, or order.

Main axis and cross axis

Main axis: The direction items flow. With the default flex-direction: row, the main axis runs horizontally.
Cross axis: The axis perpendicular to the main axis. In a row layout, that means vertical alignment.
justify-content: Aligns or distributes items on the main axis.
align-items: Aligns items on the cross axis.
flex-wrap: Lets items wrap onto new lines when one line is not enough.

Example

Here is a small toolbar built with a real div container. The parent defines the layout rules, and the children respond as flex items.

HTML

<div class="toolbar">
  <div class="toolbar__title">Projects</div>
  <div class="toolbar__search">Search</div>
  <button class="toolbar__action">New</button>
</div>

CSS

.toolbar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.toolbar__title {
  font-weight: 600;
}

.toolbar__search {
  flex: 1 1 12rem;
}

.toolbar__action {
  flex: 0 0 auto;
}

In this example, the title keeps its natural size, the search area is allowed to grow and shrink, and the button stays content-sized. That behavior comes from the flex formatting context, not from fixed widths.

The flex shorthand property

flex is a shorthand property for flex-grow, flex-shrink, and flex-basis.

flex-grow answers: how much extra space can this item take?
flex-shrink answers: how much can this item shrink when the container gets tight?
flex-basis answers: what starting size should the browser use before grow and shrink calculations?

flex: 1 1 12rem; means the item starts around 12rem, but it may both grow and shrink.

Useful shorthand values

flex: auto expands to 1 1 auto. The item can grow and shrink, and its starting size comes from its own width or content.
flex: initial expands to 0 1 auto. The item does not grow, but it can shrink if space becomes limited.
flex: none means 0 0 auto. The item keeps its natural or explicit size and will not flex.

Common mistakes

Only direct children participate. Grandchildren do not become flex items unless their own parent is also a flex container.
Flexbox is one-dimensional. It is great for rows or columns, but if you need to control both rows and columns together, grid is usually a better fit.
Wrapping is not automatic. Items stay on one line until you add flex-wrap: wrap.
Alignment and sizing are separate concerns. justify-content and align-items place items; flex decides how they grow and shrink.

Still so complicated?

Think of flexbox as a smart row or column manager. The parent decides the lane, spacing, and alignment rules; the children decide whether they keep their size, grow, or shrink inside that lane.

Summary

display: flex turns an element into a flex container and its direct children into flex items.
The layout is one-dimensional, using a main axis and a cross axis.
display: inline-flex creates the same inner flex behavior, but the container itself stays inline-level.
The flex shorthand property controls grow, shrink, and basis, including common values like flex: auto and flex: initial.