CSS Flexbox Cheat Sheet

Complete Flexbox reference — all container (parent) and item (child) properties with values and practical centering patterns.

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

Container (Parent) Properties

Property	Values	Description
flex-direction	row \| row-reverse \| column \| column-reverse	Main axis direction (default: row)
flex-wrap	nowrap \| wrap \| wrap-reverse	Allow items to wrap to next line (default: nowrap)
flex-flow	<direction> <wrap>	Shorthand for flex-direction + flex-wrap
justify-content	flex-start \| flex-end \| center \| space-between \| space-around \| space-evenly	Align items along main axis
align-items	stretch \| flex-start \| flex-end \| center \| baseline	Align items along cross axis (default: stretch)
align-content	flex-start \| flex-end \| center \| space-between \| space-around \| stretch	Align wrapped lines (only if flex-wrap: wrap)
gap	<length>	Space between flex items (shorthand for row-gap + column-gap)

Property	Default	Description
flex-grow	0	Proportion of remaining space item takes (0 = don't grow)
flex-shrink	1	How much item shrinks if container is too small (0 = don't shrink)
flex-basis	auto	Initial main size before free space is distributed
flex: 1	0 1 auto	flex: 1 = grow:1, shrink:1, basis:0 (equal width)
flex: auto	1 1 auto	Grow and shrink, base size is content size
flex: none	0 0 auto	Inflexible item — fixed to content size
align-self	auto	Override align-items for individual item
order	0	Visual order (lower = first); doesn't affect DOM order

Perfect center

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

Sticky footer

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

Responsive nav

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

Equal-width columns

.row { display: flex; gap: 1rem; }
.col { flex: 1; }

Sidebar layout

.layout { display: flex; }
.sidebar { flex: 0 0 240px; }
.main { flex: 1; }

Card grid wrap

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