CSS Flexbox

Properties applied to the parent element that establish and control the flex layout.

Term / Syntax	Name	Description	Example
display	Create Flex Context	Turns direct children into flex items.	display: flex;
flex-direction	Main-Axis Direction	Sets the main axis and controls its direction.	flex-direction: row;
flex-wrap	Wrapping	Controls whether items remain on one line or wrap.	flex-wrap: wrap;
flex-flow	Direction + Wrap	Shorthand for flex-direction and flex-wrap.	flex-flow: row wrap;
gap	Item Spacing	Creates consistent space between flex items.	gap: 1rem;

Properties for distributing items along the main and cross axes.

Term / Syntax	Name	Description	Example
justify-content	Main-Axis Alignment	Distributes items along the main axis.	justify-content: space-between;
align-items	Cross-Axis Alignment	Aligns flex items across the cross axis.	align-items: center;
align-content	Line Alignment	Distributes multiple wrapped flex lines when extra cross-axis space exists.	align-content: start;
align-self	Individual Alignment	Overrides align-items for one flex item.	align-self: flex-end;

Properties applied to flex items to control growth, shrinking, initial size, and ordering.

Term / Syntax	Name	Description	Example
flex-grow	Growth Factor	Controls how extra main-axis space is distributed.	flex-grow: 1;
flex-shrink	Shrink Factor	Controls how items shrink when space is limited.	flex-shrink: 0;
flex-basis	Initial Main Size	Sets an item's initial main-axis size before free-space distribution.	flex-basis: 18rem;
flex	Flex Shorthand	Shorthand for flex-grow, flex-shrink, and flex-basis.	flex: 1 1 18rem;
order	Visual Order	Changes visual order without changing source order.	order: 2;

Short patterns for frequently needed interface arrangements.

Term / Syntax	Name	Description	Example
center	Center Both Axes	Centers one or more items horizontally and vertically in a row layout.	display: flex; justify-content: center; align-items: center;
split-nav	Split Navigation	Pushes two groups to opposite ends of the main axis.	display: flex; justify-content: space-between; align-items: center;
wrapping-cards	Wrapping Cards	Creates wrapping items with a preferred minimum width.	display: flex; flex-wrap: wrap; gap: 1rem;
push-item	Push One Item	Uses auto margin to consume remaining main-axis space.	margin-inline-start: auto;