Published: June 2026•By Web Util Slyce Team•8 min read

CSS Flexbox — Complete Reference

A complete guide to CSS Flexbox. Generate layouts visually with our Flexbox Generator.

Flex Container Properties

Property	Values	Description
display	flex, inline-flex	Defines a flex container
flex-direction	row, row-reverse, column, column-reverse	Sets the main axis direction
flex-wrap	nowrap, wrap, wrap-reverse	Controls item wrapping
justify-content	flex-start, flex-end, center, space-between, space-around, space-evenly	Aligns items along the main axis
align-items	stretch, flex-start, flex-end, center, baseline	Aligns items along the cross axis
align-content	stretch, flex-start, flex-end, center, space-between, space-around	Aligns multi-line content along cross axis
gap	10px, 1rem, etc.	Gap between flex items (row-gap + column-gap shorthand)

Property	Values	Description
flex-grow	0 (default), 1, any number	Ability to grow relative to siblings
flex-shrink	1 (default), 0, any number	Ability to shrink relative to siblings
flex-basis	auto, 0, 200px, etc.	Initial size before growing/shrinking
flex	0 1 auto (shorthand)	Shorthand for grow, shrink, basis
align-self	auto, stretch, flex-start, flex-end, center, baseline	Overrides align-items for this item
order	0 (default), any integer	Controls the visual order of items

display: flex; justify-content: center; align-items: center;

Perfectly centers child elements both horizontally and vertically

display: flex; > * { flex: 1; }

Distributes space equally among all flex children

display: flex; flex-direction: column; main { flex: 1; }

Pushes footer to bottom when content is short

display: flex; flex-wrap: wrap; nav { flex: 0 0 200px; } main { flex: 1; } aside { flex: 0 0 150px; }

Header + nav/main/aside + footer layout

display: flex; .push-right { margin-left: auto; }

Pushes an item to the right edge using auto margin