CSS Flexbox Cheat Sheet: Every Property Explained with Examples

The Problem Flexbox Solves

Before Flexbox, achieving common layouts in CSS required float hacks, inline-block tricks, and table-based workarounds. Vertically centering an element required knowing its height. Equal-height columns required negative margins. Distributing space between items meant calculating percentages by hand.

Flexbox (the Flexible Box Layout Module) was designed to solve exactly these problems. It is a one-dimensional layout system - it operates along a single axis at a time, either row or column. For two-dimensional layouts, use CSS Grid. For everything else - navbars, card rows, form layouts, button groups, sidebars - Flexbox is the right tool.

Browser support is universal. You can use Flexbox confidently in every project without polyfills or feature detection.

The Mental Model: Container and Items

Flexbox has two categories of properties:

• Container properties - set on the parent element with display: flex. They control how items are distributed and aligned within the container.
• Item properties - set on the children. They control how individual items grow, shrink, order themselves, and override alignment.

The key concepts are the main axis (the direction items flow, set by flex-direction) and the cross axis (perpendicular to the main axis). Most alignment properties reference these axes rather than horizontal/vertical, which is why they work correctly when you rotate the layout.

Container Properties

display: flex

Turns an element into a flex container. All direct children automatically become flex items.

.container {
  display: flex;         /* block-level flex container */
  display: inline-flex;  /* inline-level flex container */
}

flex-direction

Sets the main axis. Items flow along this axis.

.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 */
}

flex-wrap

By default, flex items squeeze onto one line. flex-wrap: wrap lets them flow to a new line when they run out of space.

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

flex-flow (shorthand)

.container {
  flex-flow: row wrap;        /* direction + wrap in one property */
  flex-flow: column nowrap;
}

justify-content

Aligns items along the main axis. This is the property you reach for when you want to space out items horizontally (in a row layout).

.container {
  justify-content: flex-start;    /* default: pack to start */
  justify-content: flex-end;      /* pack to end */
  justify-content: center;        /* center items */
  justify-content: space-between; /* equal gaps between items, no edge gaps */
  justify-content: space-around;  /* equal gaps around each item */
  justify-content: space-evenly;  /* equal gaps between items AND edges */
}

Most common pattern: justify-content: space-between for navbars (logo on left, links on right) and justify-content: center for centering button groups.

align-items

Aligns items along the cross axis. In a row layout, this controls vertical alignment.

.container {
  align-items: stretch;     /* default: items fill cross-axis height */
  align-items: flex-start;  /* align to cross-axis start */
  align-items: flex-end;    /* align to cross-axis end */
  align-items: center;      /* vertically center items */
  align-items: baseline;    /* align text baselines */
}

The classic "vertically and horizontally center" pattern:

.center-everything {
  display: flex;
  justify-content: center; /* horizontal center */
  align-items: center;     /* vertical center */
  min-height: 100vh;       /* full viewport height */
}

align-content

When items wrap onto multiple lines, align-content controls how those lines are distributed along the cross axis. Has no effect on single-line containers.

.container {
  flex-wrap: wrap;
  align-content: flex-start;
  align-content: flex-end;
  align-content: center;
  align-content: space-between;
  align-content: space-around;
  align-content: stretch; /* default */
}

gap

Sets spacing between flex items without affecting outer edges. Much cleaner than using margins on items.

.container {
  gap: 1rem;           /* equal row and column gap */
  gap: 1rem 2rem;      /* row-gap column-gap */
  row-gap: 1rem;
  column-gap: 2rem;
}

Item Properties

flex-grow

A unitless number that determines how much a flex item grows relative to siblings when there is extra space. Default is 0 (do not grow).

.item-a { flex-grow: 1; } /* takes 1 part of remaining space */
.item-b { flex-grow: 2; } /* takes 2 parts of remaining space */
/* item-b gets twice as much extra space as item-a */

flex-shrink

Controls how items shrink when there is not enough space. Default is 1 (all items shrink equally). Set to 0 to prevent shrinking.

.sidebar { flex-shrink: 0; } /* fixed width sidebar, never shrinks */
.main { flex-shrink: 1; }    /* main content area shrinks normally */

flex-basis

The initial size of the item before growing or shrinking. Can be a length value or auto (use the item's content size).

.item {
  flex-basis: 200px;  /* start at 200px, then grow/shrink */
  flex-basis: 25%;    /* start at 25% of container */
  flex-basis: auto;   /* use item's own width/height (default) */
  flex-basis: 0;      /* ignore content size; start from zero */
}

flex (shorthand)

The most commonly used shorthand. Combines grow, shrink, and basis.

.item {
  flex: 1;        /* grow=1, shrink=1, basis=0  (distribute space equally) */
  flex: auto;     /* grow=1, shrink=1, basis=auto */
  flex: none;     /* grow=0, shrink=0, basis=auto (fixed size) */
  flex: 0 0 200px; /* fixed 200px, no grow or shrink */
  flex: 2 1 300px; /* start at 300px, grow at 2x rate */
}

flex: 1 on all items gives equal-width columns. This replaces the old float-based grid pattern.

align-self

Overrides align-items for a single item.

.container { align-items: center; }
.special-item { align-self: flex-end; } /* this one item aligns to bottom */

order

Changes the visual order of items without modifying the DOM. Default is 0; lower values appear first.

.first  { order: -1; } /* appears before order-0 items */
.normal { order: 0; }  /* default */
.last   { order: 1; }  /* appears after order-0 items */

Useful for changing layout order on mobile vs. desktop without duplicating HTML.

Real-World Flexbox Patterns

Navbar with logo and links

.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 1.5rem;
  height: 60px;
}
.nav-logo { font-weight: 700; }
.nav-links { display: flex; gap: 1.5rem; list-style: none; }

Card grid with equal-height cards

.card-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.card {
  flex: 1 1 300px; /* grow, shrink, min 300px wide */
  display: flex;
  flex-direction: column;
}
.card-body { flex: 1; }         /* pushes footer to bottom */
.card-footer { margin-top: auto; }

Sticky footer layout

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
main { flex: 1; } /* pushes footer to bottom of page */
footer { flex-shrink: 0; }

Sidebar + main content

.layout {
  display: flex;
  gap: 2rem;
}
.sidebar {
  flex: 0 0 260px; /* fixed 260px, no grow or shrink */
}
.main-content {
  flex: 1; /* fills remaining space */
  min-width: 0; /* prevents overflow in some browsers */
}

Responsive layout: stack on mobile, row on desktop

.container {
  display: flex;
  flex-direction: column; /* mobile: stack vertically */
  gap: 1rem;
}
@media (min-width: 768px) {
  .container {
    flex-direction: row; /* desktop: side by side */
  }
}

Flexbox vs. CSS Grid: When to Use Each

Flexbox and Grid are complementary, not competing. The right choice depends on the layout you are building:

• Use Flexbox for one-dimensional layouts: navbars, button groups, card rows, form rows, centering a single element, sidebar + content, and any layout where items flow naturally in a line.
• Use CSS Grid for two-dimensional layouts: page-level structure, dashboards, image galleries with defined rows and columns, and anywhere you need both row and column control simultaneously.
• Use both together: Grid for the overall page layout, Flexbox for the components within each grid area.

Frequently Asked Questions

What is the difference between justify-content and align-items?

justify-content controls alignment along the main axis (the direction of flex-direction). align-items controls alignment along the cross axis (perpendicular). In a default row layout: justify-content is horizontal, align-items is vertical. Rotate to flex-direction: column and these axes swap - justify-content becomes vertical and align-items becomes horizontal.

What does flex: 1 actually mean?

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0. The flex-basis: 0 means all items start from zero width and then distribute available space proportionally by their flex-grow values. When all items have flex: 1, they end up equal width. This is the correct way to build equal-width columns - not by setting width: 33.333% on each.

Why does min-width: 0 matter on flex items?

By default, flex items have an implicit min-width: auto, which means they will not shrink below their content's minimum size. This can cause items to overflow their container when content (like long text or a wide image) exceeds the available space. Setting min-width: 0 on the item removes this constraint and allows proper shrinking. You will encounter this most often with text that needs to truncate with overflow: hidden; text-overflow: ellipsis.

What is the difference between align-items and align-content?

align-items aligns items within a single flex line. align-content controls how multiple lines are distributed when flex-wrap: wrap causes items to wrap onto more than one line. If your container only has one line of items (which is most of the time), align-content has no effect.

How do I make a Flexbox item ignore its flex-grow and stay a fixed size?

Use flex: none or explicitly flex: 0 0 <size>. For example, a fixed 200px sidebar that never grows or shrinks: flex: 0 0 200px. The shorthand flex: none expands to flex: 0 0 auto - it uses the item's natural size and refuses to grow or shrink.

Can I nest flex containers?

Yes, and it is common practice. A flex item can itself be a flex container by setting display: flex on it. For example, a page uses a row flex container with a sidebar and main area; the main area is itself a column flex container stacking a header, content, and footer. There is no limit to nesting depth, though excessive nesting can make layouts hard to reason about.

The Bottom Line

Flexbox eliminates the hacks that CSS layout required for years. Learn the mental model (main axis, cross axis, container vs. item properties) and the rest follows logically. The properties you will reach for in 90% of layouts are: display: flex, flex-direction, justify-content, align-items, flex-wrap, gap, and flex: 1 on items.

Once your layout CSS is ready, use our free tool to reduce its size for production - open the CSS Minifier here. For the Grid equivalent of this guide, see our CSS Grid Cheat Sheet.