CSS Flexbox: The Complete Visual Guide (2026)

Flexbox changed CSS layout forever. Before it, centering a div was a meme. Vertical alignment required hacks. Equal-height columns needed JavaScript or table display tricks. Flexbox solved all of that with a single, intuitive layout model.

This guide covers every Flexbox property with interactive demos you can play with right here. By the end, you will have a mental model of how Flexbox works that you can apply to any layout challenge.

The Basics: Container vs. Items

Flexbox operates on two levels. The flex container (parent) controls the overall layout direction and alignment. The flex items (children) control how they individually size and position themselves within the container.

/* Make any element a flex container */
.container {
  display: flex;
}

/* All direct children become flex items automatically */

Once you set display: flex, the container's direct children lay out in a row by default, shrink to fit their content, and stretch vertically to fill the container height.

Container Properties

flex-direction

Controls the main axis — the direction items flow. The default is row (left to right). Change it to stack items vertically, or reverse the order entirely.

.container {
  flex-direction: row;           /* default: left to right */
  flex-direction: row-reverse;   /* right to left */
  flex-direction: column;        /* top to bottom */
  flex-direction: column-reverse;/* bottom to top */
}

justify-content

Distributes items along the main axis. This is the property you use most often — it handles horizontal spacing in a row layout and vertical spacing in a column layout.

align-items

Distributes items along the cross axis (perpendicular to the main axis). In a row layout, this controls vertical alignment. In a column layout, horizontal alignment.

flex-wrap

By default, flex items try to squeeze onto one line. Set flex-wrap: wrap to let items flow onto multiple lines when they run out of space.

.container {
  flex-wrap: nowrap;  /* default: single line, items shrink */
  flex-wrap: wrap;    /* items wrap onto new lines */
  flex-wrap: wrap-reverse; /* wrap upward */
}

gap

The modern way to add spacing between flex items. No more margin hacks or :last-child overrides. Supported in all modern browsers since 2021.

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

Item Properties

flex-grow

Controls how much an item grows relative to its siblings when there is extra space. A value of 0 (default) means "don't grow." A value of 1 means "take your fair share of remaining space."

flex-shrink

The opposite of flex-grow. Controls how much an item shrinks when there is not enough space. Default is 1 (items shrink equally). Set to 0 to prevent shrinking — useful for fixed-width sidebars.

flex-basis

Sets the initial size of an item before flex-grow and flex-shrink kick in. Think of it as a "suggested width" (or height in column layouts). You can use any CSS length: 200px, 30%, auto.

/* The shorthand: grow | shrink | basis */
.item {
  flex: 1;        /* flex: 1 1 0%  — grow equally */
  flex: 0 0 200px;/* fixed 200px, no grow, no shrink */
  flex: 2 1 auto; /* grow at 2x rate, shrink normally */
}

align-self

Overrides the container's align-items for a single item. Useful when one item needs different cross-axis alignment than its siblings.

.special-item {
  align-self: center;    /* just this item */
  align-self: flex-end;
  align-self: stretch;
}

order

Changes the visual order of an item without changing the HTML. Default is 0. Lower values appear first. Use sparingly — it can confuse screen readers if the visual order differs drastically from the DOM order.

Common Layout Patterns

Centering (the holy grail)

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

That is it. Three lines to perfectly center anything both horizontally and vertically. No more transform: translate(-50%, -50%) hacks.

Sticky Footer

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; }  /* main grows to fill space */
footer { /* stays at bottom */ }

Equal-Width Cards

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.card {
  flex: 1 1 300px; /* grow, shrink, min 300px */
}

Sidebar Layout

.layout {
  display: flex;
}
.sidebar { flex: 0 0 250px; } /* fixed width */
.content { flex: 1; }          /* fills remaining */

When to Use Flexbox vs. Grid

Flexbox is ideal for one-dimensional layouts — a single row or column of items. Navigation bars, card rows, form layouts, centering, and component-level alignment are all Flexbox territory.

CSS Grid is better for two-dimensional layouts — when you need control over both rows and columns simultaneously. Page layouts, image galleries, and dashboard grids are Grid territory.

In practice, most real-world layouts use both. Grid for the page structure, Flexbox for the components within each grid cell.