CSS Flexbox Cheatsheet: Every Property Explained with Examples

#webdev #css #programming #tutorial

Flexbox is a one-dimensional layout system: it lays items out along a single row or column and gives you control over their size, spacing, and alignment. Most of what you'll ever need fits in a short list of properties.

Container properties

.container {
  display: flex;
  flex-direction: row;        /* row | column | row-reverse | column-reverse */
  flex-wrap: wrap;            /* nowrap (default) | wrap */
  justify-content: center;    /* main axis */
  align-items: center;        /* cross axis */
  gap: 1rem;                  /* space between items */
}

justify-content aligns items along the main axis: flex-start, center, flex-end, space-between, space-around, space-evenly.
align-items aligns items along the cross axis: stretch (default), flex-start, center, flex-end, baseline.
align-content spaces multiple wrapped lines; it has no effect on a single line.
gap adds consistent spacing without margin hacks.

Item properties

flex-grow: how much of the free space an item takes (0 by default).
flex-shrink: how readily it shrinks when space is short (1 by default).
flex-basis: its starting size before growing or shrinking.
flex: shorthand for grow, shrink, and basis. flex: 1 makes items share space equally; flex: 0 0 200px makes a fixed 200px item.
align-self overrides align-items for one item; order changes visual order.

Patterns to copy

/* Center anything */
.center { display: flex; justify-content: center; align-items: center; }

/* Navbar: logo left, links right */
.nav { display: flex; justify-content: space-between; align-items: center; }

/* Sticky footer */
body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }

Gotchas

Text or images overflowing a flex item usually need min-width: 0 on that item, because flex items don't shrink below their content size by default.
flex-direction: column swaps the axes, so justify-content now works vertically.
Percent heights need a parent with a defined height.
For two-dimensional layouts (rows and columns together), consider CSS Grid instead.

Learn by tweaking

An interactive playground shows the effect of each property instantly and generates the CSS for you, which is the fastest way to internalize how the axes work.

Frequently asked questions

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

justify-content aligns items along the main axis (the flex direction), while align-items aligns them along the cross axis.

What does flex: 1 do?

It lets the item grow to fill available space equally with other flex: 1 items, starting from a basis of zero.

How do I center a div with Flexbox?

Set display: flex, justify-content: center, and align-items: center on the parent.

Why isn't my flex item shrinking?

Flex items default to a minimum size of their content. Add min-width: 0 (or overflow: hidden) to allow shrinking.

Try it: Flexbox Playground — free, runs in your browser, nothing is uploaded.

Originally published at ilovekit.app.

DEV Community