Cheat Sheet

Flexbox

CSS Flexbox layout reference: container properties, item properties, alignment values, common patterns, and the flex shorthand.

Flexbox (Flexible Box Layout) is a one-dimensional CSS layout system designed for distributing space and aligning items along a single axis — either horizontally (row) or vertically (column).

Flexbox operates with two key concepts: the flex container (parent with display: flex) and the flex items (its direct children). Properties on the container control direction, wrapping, and alignment, while properties on individual items let them override alignment, grow/shrink independently, or reorder themselves.

Flex Container Properties

Property	Values	What it does
display	flex \| inline-flex	Defines a flex container. Block-level or inline-level respectively.
flex-direction	row \| row-reverse \| column \| column-reverse	Sets the main axis direction. Row = horizontal, column = vertical.
flex-wrap	nowrap \| wrap \| wrap-reverse	Controls whether items wrap to a new line when they overflow.
justify-content	flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly	Aligns items along the main axis. Controls distribution of extra space.
align-items	stretch \| flex-start \| flex-end \| center \| baseline	Aligns items along the cross axis. stretch (default) makes items fill the container height.
align-content	stretch \| flex-start \| flex-end \| center \| space-between \| space-around	Aligns multi-line content when wrapping. Only works when flex-wrap is active and there are multiple lines.
gap	<length> \| <percentage>	Adds fixed spacing between items without affecting the edges. No margin hacks needed. Can also use row-gap / column-gap.

Flex Item Properties

Property	Values	What it does
flex-grow	<number> (default 0)	How much an item grows relative to siblings when extra space is available. 1 = take equal share of extra space.
flex-shrink	<number> (default 1)	How much an item shrinks when space is tight. 0 = prevent shrinking.
flex-basis	<length> \| auto \| content	Initial size of an item before growth/shrinkage is applied. auto = use the item's width/height property.
align-self	auto \| stretch \| flex-start \| flex-end \| center \| baseline	Overrides the container's align-items value for a single item. auto = inherit from container.
order	<integer> (default 0)	Changes the visual order of items. Lower values appear first. Items with the same order follow source order.

The `flex` Shorthand

flex: 1flex-grow: 1, flex-shrink: 1, flex-basis: 0 — item grows to fill available space equally.

flex: autoflex-grow: 1, flex-shrink: 1, flex-basis: auto — item grows but bases size on content/width.

flex: initialflex-grow: 0, flex-shrink: 1, flex-basis: auto — default. Item does not grow but can shrink.

flex: noneflex-grow: 0, flex-shrink: 0, flex-basis: auto — item is fully inflexible. Neither grows nor shrinks.

flex: <number>Shortcut — sets flex-grow to the number, flex-shrink to 1, flex-basis to 0. E.g. flex: 2.

Alignment Visual Reference

justify-content (main axis)

flex-startcenterflex-endspace-betweenspace-aroundspace-evenly

Use center for perfect horizontal centering. space-between pushes first/last items to edges.

align-items (cross axis)

stretchflex-startcenterflex-endbaseline

Use center for perfect vertical centering. stretch (default) fills container height.

align-content (multi-line)

stretchflex-startcenterflex-endspace-betweenspace-around

Only works when flex-wrap is active. Distributes lines along the cross axis.

align-self (per item)

autostretchflex-startcenterflex-endbaseline

Overrides align-items for a single item. auto = use the container's align-items value.

Common Flexbox Patterns

Perfect Centering

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

Centers a child element both horizontally and vertically. No more margin: auto tricks.

Sticky Footer

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

Pushes the footer to the bottom when content is short, but keeps it below when content grows.

Navbar / Header

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

Pushes logo left, nav links center, CTA right — all in one line with equal spacing.

Card Grid (responsive)

.grid {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}
.card {
  flex: 1 1 300px;
}

Cards wrap naturally. Each card is at least 300px wide and grows equally to fill the row.

Holy Grail Layout

.layout {
  display: flex;
}
.sidebar {
  width: 250px;
  flex-shrink: 0;
}
.main {
  flex: 1;
}

Fixed-width sidebar, flexible main content. No floats or calc() needed.

Vertical Stack with Spacing

.stack {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

Items stack vertically with consistent spacing. Much cleaner than margin-bottom on each child.

Try our Flexbox Generator →