developer5 sections · 29 items

CSS Flexbox Cheat Sheet

Complete CSS Flexbox reference with all container and item properties, alignment options, and common layout patterns. Essential for front-end developers.

Container Properties (Parent)

Item	Value	Notes
display	flex \| inline-flex	Enables flex context
flex-direction	row \| row-reverse \| column \| column-reverse	Main axis direction
flex-wrap	nowrap \| wrap \| wrap-reverse	Allow items to wrap
flex-flow	[direction] [wrap]	Shorthand for direction + wrap
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	10px \| 10px 20px	Row and column gap

Item Properties (Children)

Item	Value	Notes
order	0 (default) \| integer	Visual order of item
flex-grow	0 (default) \| number	How much item grows
flex-shrink	1 (default) \| number	How much item shrinks
flex-basis	auto \| length \| %	Default size before grow/shrink
flex	[grow] [shrink] [basis]	Shorthand; flex: 1 = flex: 1 1 0
align-self	auto \| flex-start \| flex-end \| center \| baseline \| stretch	Override align-items

Common Centering Patterns

Item	Value	Notes
Center horizontally	justify-content: center	--
Center vertically	align-items: center	--
Perfect center	justify-content: center; align-items: center	Both axes
Center single child	margin: auto on child	Works in flex container

Common Layout Patterns

Item	Value	Notes
Equal columns	flex: 1 on each child	--
Sidebar + main	sidebar: flex: 0 0 250px; main: flex: 1	--
Sticky footer	body: flex column; main: flex: 1	--
Holy grail	header + [nav, main, aside] + footer all in flex	--
Card grid	flex-wrap: wrap; children: flex: 0 0 calc(33.33% - gap)	--
Space between nav	justify-content: space-between on nav	--

Flexbox vs Grid Decision Guide

Item	Value	Notes
Use Flexbox for	1-dimensional layouts (row OR column)	Navigation, toolbars
Use Grid for	2-dimensional layouts (rows AND columns)	Page layouts, dashboards
Flexbox strength	Content-driven sizing	Items size to their content
Grid strength	Layout-driven sizing	Items fit the grid tracks
Combine both	Grid for page layout, Flexbox for components	Best practice

Tip: Use landscape orientation for wider tables

Related Tools

CSS Unit Converter

Convert between px, rem, em, pt, and other CSS units

Stay Updated

Get notified about new tools, features, and exclusive deals. No spam, ever.

Browse All Cheat Sheets →