CSS Flexbox cheat sheet

Flexbox is the layout tool for rows and columns of items: navigation bars, button groups, cards, form rows, anything that should line up and share space. This cheat sheet lists every property with what its values do, then gives patterns you can paste. If you want to learn the ideas properly, the free CSS course has lessons on Flexbox basics and aligning with Flexbox.

The two axes

Everything in Flexbox is about two directions:

• The main axis runs along flex-direction. By default that is horizontal (left to right).
• The cross axis runs at right angles to it, vertical by default.

When flex-direction becomes column, the axes swap: the main axis is vertical. That is why justify-content (main axis) sometimes seems to "change direction": it does not; the axis did.

<div class="row">
  <div>One</div>
  <div>Two</div>
  <div>Three</div>
</div>

.row { display: flex; }

One declaration, display: flex, makes the children flex items laid out in a row.

Container properties

These go on the parent (the flex container).

Property	Values	What it does
display	flex, inline-flex	Makes the container flex (inline-flex is inline-level)
flex-direction	row (default), row-reverse, column, column-reverse	Sets the main axis
flex-wrap	nowrap (default), wrap, wrap-reverse	Whether items go onto new lines
flex-flow	row wrap	Shorthand for direction and wrap
justify-content	flex-start, flex-end, center, space-between, space-around, space-evenly	Spacing along the main axis
align-items	stretch (default), flex-start, flex-end, center, baseline	Alignment of items on the cross axis (within a line)
align-content	flex-start, flex-end, center, space-between, space-around, stretch	Spacing of lines on the cross axis (only when items wrap)
gap	1rem, 1rem 2rem	Space between items (row gap, then column gap)

justify-content, in pictures

Three 40px boxes in a 300px container:

flex-start     [A][B][C]
flex-end                     [A][B][C]
center              [A][B][C]
space-between  [A]      [B]      [C]
space-around     [A]    [B]    [C]
space-evenly    [A]    [B]    [C]   (equal gaps incl. the edges)

space-between puts the first and last items at the edges and shares the rest; space-around gives each item equal space on both sides (so edge gaps are half the inner gaps); space-evenly makes all gaps equal.

Item properties

These go on the children.

Property	Values	What it does
flex-grow	number, default 0	Share of the extra space the item takes
flex-shrink	number, default 1	How much it shrinks when space is short
flex-basis	length, auto, 0	Starting size before growing or shrinking
flex	1, 0 0 200px, auto, none	Shorthand for grow, shrink, basis
align-self	like align-items	Overrides cross-axis alignment for one item
order	integer, default 0	Changes visual order (not the reading order)
margin: auto	on an item	Absorbs free space in that direction

Understanding flex

Shorthand	Means	Typical use
flex: 1	1 1 0%	Items share space equally
flex: auto	1 1 auto	Grow from their content size
flex: none	0 0 auto	Fixed to content size, no flexing
flex: 0 0 200px	no grow, no shrink, 200px	A fixed-width column
flex: 2	2 1 0%	Twice the share of a flex: 1 item

Example: a sidebar and a main area.

.layout { display: flex; gap: 1rem; }
.sidebar { flex: 0 0 240px; }   /* fixed 240px */
.main    { flex: 1; }           /* takes everything else */

Ready-made patterns

Centre anything, both ways

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

Navigation bar: logo left, links right

.nav { display: flex; align-items: center; gap: 1rem; }
.nav .logo { margin-right: auto; }   /* auto margin pushes the rest to the right */

Equal-height cards in a wrapping row

.cards { display: flex; flex-wrap: wrap; gap: 1rem; }
.card  { flex: 1 1 260px; }          /* grow, shrink, start at 260px */

Each card wants 260px; as many as fit go on a line, and they stretch to fill it. Because align-items defaults to stretch, the cards in one line have equal height.

Sticky footer

body { min-height: 100vh; display: flex; flex-direction: column; }
main { flex: 1; }   /* grows to push the footer down */

Space-between button row

.actions { display: flex; justify-content: space-between; }

Form row: label, input, button

.row { display: flex; gap: .5rem; align-items: center; }
.row input { flex: 1; }

Vertical stack with even spacing

.stack { display: flex; flex-direction: column; gap: 1rem; }

Common mistakes and surprises

• justify-content seems to do nothing. The container may have no extra space (shrink-wrapped width), or the items have flex: 1 and fill it all.
• align-items vertical centring fails. The container needs a height (min-height) larger than the content, otherwise there is nothing to centre within.
• An item will not shrink below its content. Flex items have min-width: auto; set min-width: 0 (or overflow: hidden) so long text or an image can shrink.
• Items overflow instead of wrapping. The default is nowrap; add flex-wrap: wrap.
• Using order for layout. It changes only the visual order, so keyboard and screen-reader order no longer match what people see. Reorder the HTML instead when you can.
• Using float or margin hacks for things Flexbox does cleanly.
• Expecting align-content to work on a single line. It only matters when items wrap onto several lines.
• Using Flexbox for a two-dimensional page layout. When rows and columns must line up together, use Grid.

Flexbox or Grid?

Use Flexbox for	Use Grid for
A row or column of items	Rows and columns together
Components: navbars, toolbars, cards	Page layouts: header, sidebar, main, footer
Content decides the size	The layout decides the size

They combine well: a Grid page layout whose header is a Flexbox navbar.

Debugging tip

Open the browser developer tools and click the small "flex" badge next to the container in the Elements panel. It overlays the flex lines and spacing. Check the computed values of flex-grow and min-width for the item that misbehaves.

Quick reference card

.container {
  display: flex;
  flex-direction: row;          /* main axis */
  flex-wrap: wrap;              /* allow lines */
  justify-content: space-between; /* along main axis */
  align-items: center;          /* across */
  gap: 1rem;
}
.item { flex: 1 1 200px; align-self: flex-start; }

Continue with the CSS interview questions to test yourself, and plan your learning with the 30-day HTML and CSS plan. Preview your own snippets in the HTML Viewer.