Skip to content

Flexbox cheatsheet

Every Flexbox property and value on one page, with a picture of what each one does.

Read the full guide

On the container

Set these on the parent, the flex container, to arrange all its children.

display

Turns flexbox on. The children become flex items.

display: block; (a div's default)

Each child takes the full width, one below the other

display: flex;

The children become flex items and line up in a row

display: inline-flex;

A flex container only as wide as its items, inside a line of text

flex-direction

Sets the main axis, the direction the items line up in.

flex-direction: row; (default)

Items line up from left to right

flex-direction: row-reverse;

Items line up from right to left

flex-direction: column;

Items stack from top to bottom

flex-direction: column-reverse;

Items stack from bottom to top

flex-wrap

Whether the items stay on one line or wrap onto more.

flex-wrap: nowrap; (default)

Everything stays on one line: items shrink, then overflow

flex-wrap: wrap;

Items that don't fit move onto a new line below

flex-wrap: wrap-reverse;

Items that don't fit move onto a new line above

flex-flow

Shorthand for flex-direction and flex-wrap, in that order.

flex-flow: row wrap;

A row whose items wrap onto new lines

flex-flow: column wrap;

A column whose items wrap into new columns

justify-content

main axis

Spaces the items along the main axis. It starts as normal, which works like flex-start.

justify-content: flex-start; (default)

Items packed together at the start of the line

justify-content: center;

Items packed together in the middle

justify-content: flex-end;

Items packed together at the end of the line

justify-content: space-between;

Equal gaps between the items, none at the edges

justify-content: space-around;

Equal space around each item, so the edges get half a gap

justify-content: space-evenly;

Equal gaps between the items and at both edges

align-items

cross axis

Aligns the items along the cross axis. It starts as normal, which works like stretch.

align-items: stretch; (default)

Items stretch to fill the container's height

align-items: flex-start;

Items line up along the top edge

align-items: center;

Items line up through the middle

align-items: flex-end;

Items line up along the bottom edge

align-items: baseline;

Items line up so their text sits on one line

align-content

cross axis

Spaces the lines along the cross axis. Needs flex-wrap: wrap (no effect with nowrap). It starts as normal, which works like stretch.

align-content: flex-start;

Wrapped lines packed together at the top

align-content: center;

Wrapped lines packed together in the middle

align-content: flex-end;

Wrapped lines packed together at the bottom

align-content: space-between;

Equal gaps between the lines, none at the edges

align-content: space-around;

Equal space around each line, so the edges get half a gap

align-content: space-evenly;

Equal gaps between the lines and at both edges

align-content: stretch; (default)

Wrapped lines stretch to share the container's height

gap

Space between items and between lines, with no margins.

gap: 0; (default)

No space, so items touch their neighbors

gap: 8px;

The same space between items and between lines

row-gap: 8px;

Space between the lines only

column-gap: 8px;

Space between the items in a line only

On the items

Set these on one child, a flex item, to change just that item.

order

Moves an item without touching the HTML. The Tab key and screen readers still follow the HTML.

order: 0; (default)

Items follow the order they have in the HTML

order: -1;

Item 3 moves before the others

flex-grow

How much of the extra space an item takes.

flex-grow: 0; (default)

Items keep their size and leave the extra space

flex-grow: 1;

Item 1 grows to take all the extra space

flex-shrink

How much an item shrinks when there isn't enough room.

flex-shrink: 1; (default)

Items shrink together when space runs out

flex-shrink: 0;

Item 1 keeps its size, so the others shrink more

flex-basis

An item's starting size, before it grows or shrinks.

flex-basis: auto; (default)

Starts from its width, or its content if it has none

flex-basis: 60%;

Item 1 starts at 60% of the container

flex

Shorthand for flex-grow, flex-shrink and flex-basis.

flex: 1;

Items grow to share the space equally

flex: auto;

Items grow from their own size to fill the space

flex: none;

Items keep their size, even if they overflow

flex: 0 1 auto; (default)

Items keep their size but can shrink to fit

align-self

cross axis

Aligns one item on its own, overriding align-items.

align-self: flex-end;

Item 2 alone moves to the bottom

align-self: center;

Item 2 alone moves to the middle

margin

An auto margin takes all the free space on its side, pushing the item away.

margin: 0; (default)

No auto margins, so items sit side by side

margin-left: auto;

Item 3 is pushed to the far end

margin: auto;

Item 2 is centered in the free space around it

Recipes

Two layouts you'll use all the time.

Center a div

Two lines center an item both ways. The container needs a height.

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
}

A responsive layout

Items wrap and share each line as the space changes. No media queries.

.container {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
}
.item {
  flex: 1 1 200px;
}
Read the full guide