Flexbox

Intermediate

Flexbox is a one-dimensional layout model. A flex container lays out its in-flow children along a main axis and a cross axis, and its layout algorithm can distribute free space by growing or shrinking flex items. The important boundary is that Flexbox owns this layout algorithm; shared alignment concepts such as `justify-content`, `align-items`, and `gap` are also specified by CSS Box Alignment.

This lesson therefore teaches what changes when an element becomes a flex container, how its main and cross axes are established, how items acquire flex base sizes and hypothetical sizes, how free space is distributed, and how wrapping creates flex lines. It does not re-teach the general box model, general sizing, or the shared alignment model.

A flex container establishes a new layout context

Set `display: flex` or `display: inline-flex` on the container. Its in-flow children become flex items, while the container itself still participates in its surrounding layout according to its outer display type. The children are no longer laid out by normal-flow block/inline participation as siblings; the Flexbox algorithm lays them out.

?

The main axis comes from flex-direction

`flex-direction` chooses the main-axis direction: `row`, `row-reverse`, `column`, or `column-reverse`. The cross axis is perpendicular to that main axis. The meaning of main-axis properties follows this choice, so changing the direction changes the geometry without changing which property is the main-axis distribution property.

?

The flex container has an inner and outer display role

`display: flex` gives the element a block-level outer role and a flex inner layout context; `display: inline-flex` gives it an inline-level outer role with the same flex inner layout. The Display lesson owns the general outer/inner display model; Flexbox owns what the flex inner context does to its children.

Flex items have a flex base size

Before free space is distributed, the algorithm determines each item’s flex base size. The base can come from `flex-basis` or, when it is `auto`, from the item’s relevant main-size/content sizing rules. The base is not simply the final width or height: it is an input to the later freezing and free-space distribution steps.

?

flex-basis chooses the starting main-size contribution

`flex-basis` sets the initial main-size contribution used by the flex algorithm. A definite length or percentage can provide a clear starting point; `auto` asks the algorithm to use the item’s main-size property when appropriate and otherwise fall back to content-based sizing rules.

?

Positive free space is distributed through flex-grow

When the flex line has positive free space after the initial sizes and constraints are considered, `flex-grow` supplies the relative factors used to distribute that free space among eligible items. A larger grow factor receives a larger share; it does not mean “make this item this many pixels wide.”

?

Negative free space is handled through flex-shrink

When the flex line has negative free space, the algorithm resolves how items shrink. `flex-shrink` supplies the relative shrink factor, and the scaled factors account for the items’ flex base sizes. Minimum constraints can stop an item from shrinking further, which can cause another iteration of the algorithm.

?

The flex shorthand is a compact algorithm input

The common three-component form is `flex: <grow> <shrink> <basis>`. For example, `flex: 1 1 0%` supplies a grow factor of 1, a shrink factor of 1, and a zero percentage basis. The shorthand has defined omitted-value behavior, so teaching the exact expansion matters more than memorizing a slogan such as “flex: 1 means equal width.”

?

Minimum and maximum constraints can freeze an item

Flexing does not override min/max constraints. During the algorithm, an item that reaches a relevant minimum or maximum can become frozen, and the remaining free space is redistributed among the items still eligible to flex. This is why two items with identical `flex` declarations can finish at different sizes.

The automatic minimum size is a frequent flex debugging boundary

Flex items have automatic minimum-size behavior that can prevent expected shrinking. Long unbreakable content is a common symptom. `min-inline-size: 0` (or the corresponding physical property) can explicitly allow an item to shrink when that is appropriate. This lesson explains the Flexbox-specific effect; the general sizing model remains with CSS Sizing.

?

Wrapping creates flex lines

`flex-wrap: wrap` allows a flex container to create multiple flex lines when items cannot fit on one line. Each line is then processed as a flex line. Cross-axis distribution can operate across the collection of lines, which is why a wrapped container is not simply “one big row.”

?

Alignment is shared, but Flexbox supplies the flex context

`justify-content`, `align-items`, `align-self`, `align-content`, and `place-*` belong to the broader CSS Box Alignment model. Flexbox defines how those alignment concepts apply to flex containers and flex lines. The shared alignment rules should therefore be learned once in the dedicated Box Alignment lesson; here we focus on their flex-specific interaction with the main/cross axes.

?

gap is shared spacing between flex items

`row-gap`, `column-gap`, and the `gap` shorthand are shared Box Alignment features. In Flexbox they create gutters between adjacent flex items and between flex lines when wrapping. They are not a replacement for all margins, and they do not change the Box Model ownership of margins and padding.

Order changes visual order, not document semantics

The `order` property changes the order in which flex items are laid out and painted within the flex container. It does not rewrite the document tree or automatically change the meaning of source order for accessibility, reading, or sequential interaction. Use it only when the visual reordering is intentional and safe.

?

Absolutely positioned children are outside the flex-item layout

An absolutely positioned child is removed from normal flow and is not a flex item participating in the ordinary flex layout algorithm. Positioned Layout remains the owner of out-of-flow positioning and containing blocks; this lesson only establishes the boundary so you can recognize why a positioned child does not consume flex free space like an ordinary flex item.

Flexbox is one dimension, not a universal page-layout replacement

Flexbox can create sophisticated interfaces, but its algorithm resolves one main dimension at a time. Grid owns two-dimensional track layout. Normal flow owns ordinary block/inline participation. Positioning owns out-of-flow placement. The right curriculum boundary is therefore to learn each model as a distinct layout system and combine them when the page needs more than one.

Flexbox also does not replace Sizing, Box Model, Overflow, Writing Modes, or Box Alignment. It consumes those concepts and adds a specific flex layout algorithm around them.

A practical Flexbox diagnosis

When a flex layout surprises you, inspect it in this order: confirm the container and its `flex-direction`; determine whether there is one line or multiple lines; inspect each item’s `flex-basis`; inspect grow/shrink factors; check min/max constraints and automatic minimum sizes; then inspect alignment and gaps. This follows the algorithm instead of guessing at individual properties.

Specification and ownership boundary

Primary authority: W3C CSS Flexible Box Layout Module Level 1. The current CSSWG Editor’s Draft is dated 8 May 2026. Flexbox owns the flex formatting context and its layout algorithm, including flex base size, free-space distribution, freezing, wrapping, and item ordering. CSS Box Alignment owns the shared alignment features; CSS Sizing owns general sizing concepts; CSS Display owns the general outer/inner display model; CSS Positioned Layout owns out-of-flow positioning.

Quick review

You should now be able to explain the difference between the flex container, flex line, flex base size, free space, grow/shrink factors, and alignment. You should also be able to identify when a surprising result belongs to Flexbox versus Sizing, Box Alignment, Box Model, Overflow, or Positioned Layout.