CSS Flexbox Cheatsheet - Flexbox Layout Reference

For developers who have fought with floats or inline-block for centering and equal-width rows. Flexbox is the modern way to lay out a single row or column quickly. The recurring confusion is that Flexbox is one-dimensional and that justify-content and align-items act on different axes. By the end you can center anything, build a toolbar and a wrapping card row, and control item sizing with flex-grow/flex-shrink/flex-basis without trial and error.

Web Services·44 commands·Last updated 2026-07-21

Container Properties 8

display: flex

Enable flex layout (block-level)

display: inline-flex

Enable flex layout (inline-level)

flex-direction: row

Main axis = row, horizontal (default)

flex-direction: column

Main axis = column, vertical

flex-direction: row-reverse

Row, reversed order

flex-direction: column-reverse

Column, reversed order

flex-wrap: wrap

Allow wrap (default nowrap)

flex-flow: row wrap

Shorthand for direction + wrap

Gap & Main-axis Alignment 8

gap: 16px

Gap between items (row & column)

row-gap: 16px

Row gap only

column-gap: 16px

Column gap only

justify-content: flex-start

Start of main axis (default)

justify-content: center

Center on main axis

justify-content: flex-end

End of main axis

justify-content: space-between

Space between, ends flush

justify-content: space-around

Equal space around each item

Cross-axis Alignment 7

justify-content: space-evenly

All gaps exactly equal

align-items: stretch

Stretch to fill cross axis (default)

align-items: flex-start

Start of cross axis

align-items: center

Center on cross axis

align-items: flex-end

End of cross axis

align-items: baseline

Align on baseline

align-content: center

Cross-axis alignment of wrapped lines

Item Properties 10

flex-grow: 1

Grow factor, 0 = no grow (default)

flex-shrink: 1

Shrink factor, 0 = no shrink (default 1)

flex-basis: 200px

Initial size (default auto)

flex: 1

Shorthand: 1 1 0%, share free space

flex: 0 0 200px

Shorthand: no grow/shrink, fixed 200px

flex: auto

Shorthand: 1 1 auto

flex: none

Shorthand: 0 0 auto, no grow/shrink

align-self: flex-end

Override align-items for one item

order: 1

Display order, default 0, can be negative

order: -1

Move to the front

Common Patterns 6

justify-content: center; align-items: center

Horizontal & vertical center

justify-content: space-between

Space-between (navbar left/right)

flex: 1

Share remaining space

margin-left: auto

Push item to end of main axis

min-height: 100vh

Sticky footer with column (child flex:1)

flex: 1 0 auto

Fixed base, no shrink (sidebar)

Responsive Tips 5

flex-wrap: wrap

Auto wrap when window narrows

flex-basis: 200px; flex-grow: 1

Responsive card grid

flex-wrap: wrap-reverse

Reverse wrap layout

@media (max-width: 768px) { flex-direction: column }

Switch to column on mobile

flex: 1 1 100%

Fill full row, force wrap

Tips

flex: 1 is shorthand for flex: 1 1 0% — it divides the remaining space equally.
align-items aligns on the cross axis; with flex-direction: column the cross axis becomes horizontal.
The gap property replaces the old margin trick, setting item spacing more cleanly.
flex-wrap: wrap combined with flex-basis enables responsive grid-like layouts.
Prefer the flex shorthand; setting flex-grow/shrink/basis separately easily overrides intended behavior.

Official References

Each command links to its official documentation below, so you can verify the latest usage and read deeper.

MDN Web Docs

Maintained by LaoHand

Publicly updated on Jul 21, 2026, continuously proofread against official docs.

Contact Us

Wrong command or description? Send us corrections, business inquiries or product feedback by email.