CSS Flexbox Cheat Sheet: Every Property with Examples
A practical flexbox reference — container and item properties, the layouts you'll build most, Tailwind equivalents, and when to use grid instead.
Editorial disclosure: Pyalm publishes and maintains the products and free tools discussed on this site. Regulatory statements are linked to primary sources where applicable. No independent professional review is claimed unless a reviewer is explicitly named.
Flexbox lays out items along one axis — a row or a column — and handles spacing and alignment for you. It powers most navigation bars, button groups, card internals and centring tricks on the web.
Container properties
| Property | Values | Tailwind |
|---|---|---|
display |
flex |
flex |
flex-direction |
row · row-reverse · column · column-reverse | flex-row flex-col |
flex-wrap |
nowrap · wrap · wrap-reverse | flex-wrap |
justify-content (main axis) |
flex-start · center · flex-end · space-between · space-around · space-evenly | justify-between … |
align-items (cross axis) |
stretch · flex-start · center · flex-end · baseline | items-center … |
align-content (wrapped lines) |
flex-start · center · space-between · stretch | content-between … |
gap |
length | gap-4 |
Item properties
| Property | What it does | Tailwind |
|---|---|---|
flex-grow |
Share of spare space the item takes | grow |
flex-shrink |
Whether it shrinks when space is tight | shrink-0 |
flex-basis |
Starting size before growing/shrinking | basis-1/3 |
flex: 1 |
Grow to fill, starting from 0 | flex-1 |
align-self |
Override align-items for one item | self-end |
order |
Visual order | order-first |
Layouts you'll build every week
Centre anything: display:flex; justify-content:center; align-items:center;
Nav bar with logo left, links right: display:flex; justify-content:space-between; align-items:center;
Input with button: input gets flex:1, button gets flex-shrink:0.
Responsive card row: display:flex; flex-wrap:wrap; gap:1rem; with each card flex: 1 1 280px;.
Push the last item to the end: give it margin-left:auto.
Try every property live
The free Flexbox Playground lets you flip each container and item property, click items to edit them individually, and copy the result as CSS or Tailwind classes.
Common gotchas
- justify-content does nothing when items already fill the row or one item has
flex-grow. - Text overflowing a flex item? Add
min-width: 0— flex items won't shrink below their content by default. - Images stretching?
align-items: stretchis the default; setalign-items: flex-startor give imagesalign-self: center.
Flexbox or grid?
Flexbox for one dimension (a row or a column). Grid when rows and columns must line up together — page layouts, galleries, dashboards.
Rather have it built?
Pyalm designs and builds fast, conversion-focused websites in Next.js — the same stack these tools run on — with a consistent design system, accessible colours and technical SEO built in.
Related free tools
Flexbox Playground | Tailwind Playground | Box Shadow Generator | All free tools