Skip to content

CSS Flexbox Cheatsheet — Complete Quick Reference (2026)

DodaTech Updated 2026-06-20 2 min read

In this tutorial, you'll learn about CSS Flexbox Cheatsheet. We cover key concepts, practical examples, and best practices to help you understand and apply this topic effectively.

CSS Flexbox provides a one-dimensional layout model that distributes space and aligns items within a container, ideal for rows, columns, and responsive components.

Container Properties

Property Values Description
display flex, inline-flex Enable Flexbox
flex-direction row, row-reverse, column, column-reverse Main axis direction
flex-wrap nowrap, wrap, wrap-reverse Allow wrapping
flex-flow <direction> <wrap> Shorthand
justify-content flex-start, flex-end, center, space-between, space-around, space-evenly Main axis alignment
align-items stretch, flex-start, flex-end, center, baseline Cross axis alignment
align-content stretch, flex-start, flex-end, center, space-between, space-around Multi-line cross axis
gap <length> Space between items 
.container {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1rem;
}

Item Properties

Property Values Description
flex-grow <number> (default 0) Proportion of extra space
flex-shrink <number> (default 1) Proportion to shrink
flex-basis <length>, auto, content Initial size
flex <grow> <shrink> <basis> Shorthand
align-self auto, flex-start, flex-end, center, baseline, stretch Override align-items
order <integer> (default 0) Visual order 
.item { flex: 1 1 200px; }          /* grow, shrink, basis */
.item-grow { flex-grow: 2; }       /* takes 2x space */
.item-fixed { flex: 0 0 300px; }   /* no grow, no shrink */
.item-last { order: 1; }           /* reorder visually */

Common Layout Patterns

Centering:

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

Sticky footer:

body { display: flex; flex-direction: column; min-height: 100vh; }
main { flex: 1; }   /* pushes footer down */

Equal-height columns:

.row { display: flex; }
.col { flex: 1; }   /* all equal width & height */

Holy grail layout:

body { display: flex; flex-direction: column; min-height: 100vh; }
.content { display: flex; flex: 1; }
nav, aside { flex: 0 0 200px; }
main { flex: 1; }

Must-Know Items

  • flex: 1 = flex-grow: 1; flex-shrink: 1; flex-basis: 0%
  • flex: auto = flex-grow: 1; flex-shrink: 1; flex-basis: auto
  • flex: none = flex: 0 0 auto — item size determined by content
  • Negative order values place items before default (0) order
  • gap works in both row and column directions — replaces margin hacks
  • min-width: 0 may be needed to prevent overflow on flex items (default min-width: auto)
  • align-content only affects multi-line flex containers (when flex-wrap: wrap)
  • Cross-axis margins (margin-left: auto) push items to opposite end
What is the difference between `align-items` and `align-content`?

align-items aligns items along the cross axis within a single line. align-content distributes space between multiple lines (only works when flex-wrap: wrap and there are enough items to wrap). For a single line, align-content has no effect.

What does `flex: 1` mean in CSS?

flex: 1 is shorthand for flex-grow: 1; flex-shrink: 1; flex-basis: 0%. The item can grow and shrink equally, with a zero starting basis, so all flex: 1 items divide available space equally.

See full CSS tutorials for advanced layout techniques.

← Previous Redis Cheatsheet — Complete Quick Reference (2026) Next → CSS Grid Cheatsheet — Complete Quick Reference (2026)

Built by the developers of DodaTech

Doda Browser, DodaZIP & Durga Antivirus Pro

Home Browse Cheatsheets