CSS Flexbox Cheat Sheet: Axis, Align, Gap & Common Layouts

CSS Flexbox is a one-dimensional layout model: a flex container distributes extra space along a main axis and aligns items on the cross axis. Use it for nav bars, button groups, and equal-height rows. Use Grid when you need rows and columns at once.

This CSS cheat sheet is written for people searching for a fast, accurate reference: students, junior developers, and teams shipping production software. Pin it, copy the snippets, and come back when syntax slips.

Quick reference

• Container: display: flex (or inline-flex). Children become flex items.
• Direction: flex-direction: row | column | row-reverse | column-reverse. Main axis follows this.
• Justify: justify-content packs along the main axis: flex-start, center, space-between, space-around.
• Align: align-items on the cross axis: stretch (default), center, flex-start, baseline.
• Gap: gap (and row-gap/column-gap) replaces margin hacks between items.
• Wrap: flex-wrap: wrap lets items break onto new lines. Pair with align-content for extra rows.
• Grow: flex: 1 is shorthand for grow 1, shrink 1, basis 0% — equal remaining width.
• Item align: align-self overrides align-items on one child.

Copy-paste examples

Responsive nav and clustered actions

Default web flex direction is row. Center items on the cross axis so icons and labels line up.

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.card-row {
  display: flex;
  gap: 1rem;
}
.card-row > * {
  flex: 1 1 12rem;
}

Common mistakes

• Using Flexbox for a full page grid of rows and columns — Grid is clearer.
• Forgetting that align-items: stretch needs a defined cross size on the container.
• Spacing with random margins on every child instead of gap.
• Assuming flex-direction default is column (that is React Native, not CSS).

FAQ

1. When is Flexbox the wrong tool? Two-dimensional alignment (header + sidebar + footer as a page) is Grid. Overlapping positioned widgets is positioning, not flex.

1. What does BLOGPH0 mean? The item can grow and shrink from a zero basis, so siblings with flex: 1 share leftover space equally.

1. Why is my item not centering? The container needs a height (or min-height) for vertical centering in a column, and align-items/justify-content must match the axis you care about.

Related CSS cheat sheets

• Css Cheat Sheet 2026
• Css Grid Cheat Sheet
• Css Selectors Cheat Sheet

Build with this stack

When a cheat sheet is not enough — you need a production app, a student FYP, or a custom dashboard — ArpaNeuro builds custom web development and also sells ready-made source code. Request a quote and tell us the stack.

Browse software development services or the source code marketplace if you want a working codebase instead of starting from a blank file.