Flexbox in depth: containers and flexible items

Master Flexbox through axes, alignment, distribution, wrapping and item-level control with real examples and an interactive lab.

📘 Theory

Flexbox makes more sense when you separate the container from the items and keep the axes in mind.

Flexbox works in one dimension: it organizes content as a row or a column.

The container defines the direction, spacing and alignment rules, while the children become flexible items that respond to those rules.

Two axes control almost everything: the main axis and the cross axis.

Main axis: the primary direction, usually controlled by `flex-direction`.
Cross axis: the perpendicular direction.
Container properties affect the group; item properties affect a specific element.

These properties define direction, alignment and space distribution.

`display: flex` activates a flexible formatting context.

`flex-direction` sets the main axis: `row`, `row-reverse`, `column` or `column-reverse`.

`flex-wrap` decides whether items stay on one line or wrap onto multiple lines.

`flex-flow` is shorthand for direction plus wrap.

`justify-content` aligns along the main axis.

`align-items` aligns along the cross axis.

`align-content` distributes wrapped lines when multiple lines exist.

`gap` adds spacing between items without requiring margin hacks.

This is where individual elements become more flexible or more opinionated than the rest.

`order` changes the visual order without changing the HTML source.

`flex-grow` decides how much an item expands when free space is available.

`flex-shrink` decides how much an item can compress when space is tight.

`flex-basis` sets the initial preferred size before grow or shrink take effect.

`flex` is the shorthand that combines grow, shrink and basis.

`align-self` allows one item to align differently from the rest of the row or column.

These are the patterns you will reuse in real interfaces all the time.

Perfect centering: `justify-content: center` + `align-items: center`.
Navbar split: `space-between` separates logo and menu cleanly.
Responsive card rows: combine `flex-wrap` with `flex-basis`.
Button groups: use `gap` instead of ad-hoc margins.
Auto margins: `margin-left: auto` is ideal when one item needs to push itself to the far edge.