Flexbox Cheat Sheet · Intake 26.13

1. The big idea

Flexbox is a one-axis layout system. You turn a parent element into a flex container with display: flex (or inline-flex), and every direct child instantly becomes a flex item. From then on there are exactly two families of properties:

Container properties

Go on the parent. They set the direction items flow, how leftover space is shared out, and whether items wrap onto new lines.

Item properties

Go on the children. They control how one item grows, shrinks, orders itself, or breaks away from the group alignment.

.container {
  display: flex;   /* the parent becomes a flex container */
}
/* every direct child of .container is now a flex item */

Axis rule of thumb: the main axis follows flex-direction (row = horizontal, column = vertical); the cross axis is the perpendicular one. justify-content works on the main axis, align-items works on the cross axis. Learn that pair and the rest falls into place.

2. Parent container properties

These apply directly to the wrapper element — the one carrying display: flex or display: inline-flex.

Property	Controls	What it does	Common values	Docs
`flex-direction`	Axis	Sets the main axis — whether items flow left-to-right, right-to-left, top-to-bottom or bottom-to-top.	`row` · `column` · `row-reverse` · `column-reverse`	MDN
`justify-content`	Main axis	Distributes items and leftover free space along the main axis — start, centre, end, or spread out evenly.	`flex-start` · `center` · `space-between` · `space-around`	CSS-Tricks
`align-items`	Cross axis	Sets the default alignment of every item across the cross axis (perpendicular to the main axis).	`stretch` · `center` · `flex-start` · `flex-end`	MDN
`flex-wrap`	Wrapping	Decides whether items squeeze onto one line or break onto new lines when they run out of room.	`nowrap` · `wrap` · `wrap-reverse`	CSS-Tricks
`align-content`	Multi-line	Aligns the lines themselves on the cross axis when wrapping creates extra space. Only affects multi-line containers.	`stretch` · `center` · `space-around`	MDN
`gap` (row-gap / column-gap)	Gutter	Sets consistent spacing between items directly — no margin hacks needed.	any length or percentage, e.g. `gap: 1rem`	MDN

.container {
  display: flex;
  flex-direction: row;            /* main axis: left → right (default) */
  justify-content: space-between; /* spread items along the main axis  */
  align-items: center;            /* centre items on the cross axis    */
  flex-wrap: wrap;                /* allow wrapping onto new lines     */
  gap: 1rem;                      /* 1rem gutter between every item    */
}

3. Child item properties

These go on the individual elements inside the flex container — each child can have its own values.

Property	Controls	What it does	Values / default	Docs
`flex-grow`	Growing	How much of the leftover free space this item takes, as a share. `flex-grow: 2` grabs twice as much as `flex-grow: 1`.	number · default `0` (don't grow)	CSS-Tricks
`flex-shrink`	Shrinking	How willingly this item shrinks when the container is too small for everyone. `0` means "never squash me".	number · default `1` (shrink equally)	MDN
`flex-basis`	Base size	The item's starting size along the main axis, before any growing or shrinking is calculated.	`auto` · any length, e.g. `200px`	MDN
`align-self`	Override	Lets one item ignore the container's `align-items` setting and align itself independently on the cross axis.	`auto` · `center` · `flex-start` · `flex-end`	CSS-Tricks
`order`	Sequence	Changes the visual display order of items without touching the HTML. Lower numbers appear first.	integer · default `0`	MDN
`flex` (shorthand)	Combined	Merges `flex-grow`, `flex-shrink` and `flex-basis` into one line — the way you'll usually write it.	`flex: grow shrink basis`, e.g. `flex: 1 1 auto`	MDN

.item {
  flex: 1 1 200px;  /* grow: 1 · shrink: 1 · basis: 200px */
  align-self: center;
  order: 2;         /* display after items with order 0 or 1 */
}

Shorthand cheat codes: flex: 1 = share space equally · flex: auto = size to content, then grow · flex: none = fixed size, never grow or shrink.

4. Live demos

Each grey box below is a real flex container — Bootstrap's flex utility classes are just flexbox properties wearing a name tag. Resize the browser and watch the wrap demo reflow.

justify-content: space-between

1 2 3

justify-content: center + gap

1 2 3

align-items: center (cross-axis centring)

short tall short

flex-wrap: wrap (resize the window!)

one two three four five six seven

flex-grow: 1 on the middle item only

fixed flex-grow: 1 fixed

flex-direction: column

first second third

Bootstrap connection: d-flex, justify-content-between, align-items-center, flex-wrap, flex-grow-1, flex-column — every Bootstrap flex utility maps one-to-one to a flexbox property on this page. Learn flexbox once, get Bootstrap's layout classes for free.

5. Practice tools & games

Reading a cheat sheet gets you 20% of the way — playing with real containers gets you the rest.

Flexbox Froggy · game

An interactive game — guide frogs to their lilypads by writing real flexbox alignment rules, level by level.

Play Froggy

Flexbox Zombies · course

A narrative-driven course that builds long-term muscle memory around alignment mechanics and item scaling.

Launch the course

Malven's Visual Guide · interactive spec

A visual reference — toggle each property and watch a live container update. Great for "wait, which one was it again?" moments.

Open the sandbox

Joy of Code Playground · lab

An interactive layout editor for staging element groupings and watching real-time wrapping, axis shifts and flex calculations.

Explore the labs