CSS Flexbox Cheatsheet

Container Properties

.container {
  display: flex;          /* or inline-flex */
}

flex-direction

Value	Description
row	Left to right (default)
row-reverse	Right to left
column	Top to bottom
column-reverse	Bottom to top

flex-wrap

Value	Description
nowrap	Single line (default)
wrap	Wrap to new lines
wrap-reverse	Wrap upward/leftward

flex-flow (shorthand)

flex-flow: row wrap;  /* flex-direction + flex-wrap */

justify-content (main axis)

Value	Description
flex-start	Pack to start (default)
flex-end	Pack to end
center	Center items
space-between	Even space between items
space-around	Even space around items
space-evenly	Equal space between and around

align-items (cross axis)

Value	Description
stretch	Stretch to fill (default)
flex-start	Align to top/start
flex-end	Align to bottom/end
center	Center vertically
baseline	Align text baselines

align-content (multi-line cross axis)

Value	Description
stretch	Stretch lines to fill (default)
flex-start	Pack lines to start
flex-end	Pack lines to end
center	Center lines
space-between	Even space between lines
space-around	Even space around lines
space-evenly	Equal space between and around lines

gap

gap: 16px;            /* row-gap and column-gap */
row-gap: 16px;        /* gap between rows */
column-gap: 8px;      /* gap between columns */
gap: 16px 8px;        /* row-gap column-gap */

Item Properties

order

.item { order: 2; }  /* Default: 0. Lower values appear first */

flex-grow

.item { flex-grow: 1; }  /* Default: 0. How much to grow */

flex-shrink

.item { flex-shrink: 0; }  /* Default: 1. How much to shrink */

flex-basis

.item { flex-basis: 200px; }  /* Default: auto. Initial size */

flex (shorthand)

Value	Equivalent
flex: 1	flex: 1 1 0%
flex: auto	flex: 1 1 auto
flex: none	flex: 0 0 auto
flex: 0 1 200px	grow=0, shrink=1, basis=200px

align-self

.item { align-self: center; }
/* Values: auto | flex-start | flex-end | center | baseline | stretch */

Common Patterns

Center an element

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

Sticky footer

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }

Navbar with logo left, links right

nav { display: flex; justify-content: space-between; align-items: center; }

Equal-width columns

.container { display: flex; gap: 16px; }
.column { flex: 1; }

Last item pushed to end

.container { display: flex; }
.item:last-child { margin-left: auto; }

Responsive wrap with minimum size

.container { display: flex; flex-wrap: wrap; gap: 16px; }
.item { flex: 1 1 300px; }

Holy grail layout

.page { display: flex; flex-direction: column; min-height: 100vh; }
.content { display: flex; flex: 1; }
.sidebar { flex: 0 0 250px; }
.main { flex: 1; }

Vertically centered icon + text

.btn { display: flex; align-items: center; gap: 8px; }