Eiko Wagenknecht
Software Developer, Freelancer & Founder
blog, tech, web development

Tailwind Flexbox Cheat Sheet

Eiko Wagenknecht

Like many web developers, I frequently reference Flexbox properties when using Tailwind CSS. While existing cheat sheets are helpful, I needed one that better matched my mental model and workflow.

This led me to create my own Flexbox cheat sheet, built with React and Tailwind CSS.

The cheat sheet features live, responsive components instead of static images, so maintenance and updates are straightforward.

The content is organized into key sections covering essential Flexbox concepts: Display, Flow Direction, Item Sizing, Wrapping, Justify Content, Align Items, Align Self, and Align Content. Each section uses visual examples to demonstrate its properties.

I also included a Node.js script that generates a landscape A4 PDF version for offline reference.

This was a fun exercise in using React components to create a self-documenting resource.

You can check out the source code (including the script to generate the PDF version) and adapt it for your own use.

Below is a preview of the cheat sheet, which presents the same content as the full version in a condensed 1-2 column layout instead of the original 6 columns. You can use your browser’s developer tools to inspect the components and see how they are built.

Tailwind CSS Flexbox Cheat Sheet

Display

flex
FLEX
D
block-level flex container
inline-flex
Lorem ipsum dolor sit amet, consecutor
FLEX
amet.
inline flex container, flows with text

Flow Direction

flex-[...] defines the main axis (= flow direction) and cross axis (= perpendicular to flow direction).
flex-row
A
B
D
flex-row-reverse
A
B
flex-col
A
B
flex-col-reverse
A
B

Wrapping

flex-no-wrap
A
B
C
D
flex-wrap
A
B
C
flex-wrap-reverse
A
B
C

Item Sizing

grow-0
grow-0
D
does not expand
grow
grow
expands to fill space
shrink-0
shrink-0
does not shrink
shrink
shrink
D
shrinks to fit space
basis-auto
auto
D
starts at content size
basis-0
0
starts at zero size

Others

order-first
A
B
C
moves before all items
order-last
A
B
C
moves after all items
order-[...]
A
B
C
moves to specific position [...], default 0

Justify Content

justify-[...] aligns the items along the axis of the flex.
justify-start
D
justify-center
justify-end
justify-between
equal spaces between items
justify-around
equal spaces around items (doubles gaps between)
justify-evenly
all spaces are identical

Align Items

items-[...] aligns each item along the cross axis of the flex.
items-start
D
items-center
items-end
items-stretch
fills cross axis (requires h-auto/w-auto on children)
items-baseline

Align Self

self-[...] aligns a single item along the cross axis of the flex.
self-auto
auto
D
follows the parent
self-start
start
self-center
center
self-end
end
self-stretch
stretch
self-baseline
baseline
(this needs multiple items to work)

Align Content

content-[...] aligns all items of a row/column together along the cross axis of the flex.
content-stretch
D
content-start
content-center
content-end
content-between
equal spaces between lines
content-around
equal spaces around lines (doubles gaps between)
content-evenly
all spaces are identical

Shorthands

flex-initial
initial
D
can shrink, won't grow (grow-0 shrink-1 basis-auto)
flex-1
flex-1
flex-1
equal size, ignores content (grow-1 shrink-1 basis-0)
flex-auto
auto
auto
equal size, respects content (grow-1 shrink-1 basis-auto)
flex-none
none
fixed size (grow-0 shrink-0 basis-auto)

No Comments? No Problem.

This blog doesn't support comments, but your thoughts and questions are always welcome. Reach out through the contact details in the footer below.