The Complete Guide to CSS Flexbox in 2026

Q: How do I center a div with Flexbox?

Set the parent to display: flex and use justify-content: center (centers on the main/horizontal axis) plus align-items: center (centers on the cross/vertical axis). Give the container a height (for example min-height: 100vh) so there’s vertical space to center within. That combination centers the child both horizontally and vertically.

Q: What does flex: 1 mean?

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0. It tells an item to grow to take an equal share of the available space, so several items with flex: 1 divide the container evenly regardless of their content size. It’s the quickest way to make columns or items fill and share space equally.

A complete guide to CSS Flexbox — the container and item properties, main and cross axes, alignment, wrapping, the flex shorthand and common layout patterns — with copy-paste examples throughout.

XCODX TeamJuly 29, 2026 · 5 min read

CSS Flexbox is the go-to tool for one-dimensional layout — arranging items in a row or a column, distributing space between them, and aligning them. This complete guide covers every flex property that matters, the mental model of the two axes, and the everyday patterns (centering, navbars, card rows) with copy-paste code.

The mental model: two axes

A flex container lays its children out along a main axis and aligns them on the perpendicular cross axis. flex-direction sets which is which: with row (the default) the main axis is horizontal; with column it’s vertical. Almost every flex property acts on one of these two axes — keep them straight and the rest is easy.

.container {
  display: flex;            /* children become flex items */
  flex-direction: row;      /* row | row-reverse | column | column-reverse */
}

justify-content — main-axis alignment

justify-content distributes items along the main axis — this is how you space a row of items or push them to one side.

.container {
  display: flex;
  justify-content: space-between;
  /* flex-start | center | flex-end | space-between | space-around | space-evenly */
}

align-items — cross-axis alignment

align-items aligns items along the cross axis (perpendicular to the main axis). center is how you vertically center a row of items; stretch (the default) makes them fill the container’s height.

.container {
  display: flex;
  align-items: center;
  /* stretch | flex-start | center | flex-end | baseline */
}

Centering anything

The famous "center a div" — trivial with Flexbox. Center on both axes by combining justify-content and align-items.

.center {
  display: flex;
  justify-content: center;   /* horizontal (main axis) */
  align-items: center;       /* vertical (cross axis) */
  min-height: 100vh;
}

flex-wrap

By default flex items stay on one line and shrink to fit. flex-wrap: wrap lets them flow onto multiple lines when they run out of room — essential for responsive card rows. When wrapped, align-content controls spacing *between* the lines.

.container {
  display: flex;
  flex-wrap: wrap;      /* nowrap | wrap | wrap-reverse */
  gap: 16px;
}

The flex shorthand on items

On each item, flex is shorthand for three properties that decide how it grows, shrinks and sizes: flex-grow (share of extra space), flex-shrink (how it gives up space), and flex-basis (its starting size). The common values are worth memorizing.

.item { flex: 1; }        /* grow to fill equally; = 1 1 0 */
.item { flex: 0 0 200px; } /* fixed 200px, never grow/shrink */
.item { flex: auto; }      /* size to content, then grow; = 1 1 auto */

flex-grow — how much of the leftover space this item takes (0 = don’t grow).
flex-shrink — how readily it shrinks when space is tight (0 = don’t shrink).
flex-basis — the item’s size before growing/shrinking (often 0 or auto).

gap

gap sets consistent spacing between flex items without margins — no more :last-child margin hacks. It’s widely supported and the modern way to space items.

.container {
  display: flex;
  gap: 16px;          /* row-gap and column-gap in one */
}

order and align-self

order changes an item’s visual position without touching the HTML (use sparingly — it can hurt accessibility and tab order). align-self overrides align-items for a single item.

.item        { align-self: flex-end; } /* this one aligns differently */
.promoted    { order: -1; }            /* move visually first */

Common patterns

Navbar: logo left, links right

.nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

Responsive card row

.cards {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.card { flex: 1 1 250px; }   /* at least 250px, then grow to fill */

Sticky footer (push footer to the bottom)

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }            /* main grows, footer sits at the bottom */

Flexbox cheat sheet

display: flex on the parent turns children into flex items.
flex-direction sets the main axis (row or column).
justify-content aligns on the main axis; align-items on the cross axis.
flex-wrap: wrap + gap for responsive multi-line layouts.
flex: 1 makes items share space equally; flex: 0 0 <size> fixes a size.
align-self overrides alignment for one item; order re-positions visually.

Frequently asked questions

What is the difference between Flexbox and Grid?

Flexbox is for one-dimensional layout — arranging items in a single row or column and distributing space along that axis. CSS Grid is for two-dimensional layout — rows and columns at the same time. Use Flexbox for components like navbars, toolbars and card rows; use Grid for overall page layouts and any design that needs to align in both directions. They’re complementary and often used together.

How do I center a div with Flexbox?

Set the parent to display: flex and use justify-content: center (centers on the main/horizontal axis) plus align-items: center (centers on the cross/vertical axis). Give the container a height (for example min-height: 100vh) so there’s vertical space to center within. That combination centers the child both horizontally and vertically.

What does flex: 1 mean?

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0. It tells an item to grow to take an equal share of the available space, so several items with flex: 1 divide the container evenly regardless of their content size. It’s the quickest way to make columns or items fill and share space equally.

Why are my flex items not wrapping?

By default flex items don’t wrap — they stay on one line and shrink to fit. Add flex-wrap: wrap to the container to let items flow onto new lines when they run out of space. Combine it with a sensible flex-basis (for example flex: 1 1 250px) and gap so items wrap at a reasonable width and stay evenly spaced.

Experiment with Flexbox live in XCODX Studio — edit CSS and see the layout instantly. See also the complete guide to CSS Grid, Flexbox vs CSS Grid and CSS best practices.