Flexbox Master Guide: The Modern Way to Build Layouts in 2026

Flexbox Master Guide: The Modern Way to Build Layouts in 2026 The One-Dimensional Model Flexbox is a one-dimensional layout method. It works on either a row OR a column, not both simultaneously. For two-dimensional control, use CSS Grid. .container { display : flex ; flex-direction : row ; /* row | row-reverse | column | column-reverse */ flex-wrap : wrap ; /* nowrap | wrap | wrap-reverse */ } The flex Shorthand /* flex: <grow> <shrink> <basis> */ .item { flex : 1 ; /* flex: 1 1 0 — grow, shrink, basis 0 */ flex : 1 0 ; /* flex: 1 0 auto — basis defaults to auto */ flex : 0 0 200px ; /* fixed 200px, no grow/shrink */ flex : 1 ; /* flex: 1 1 0 — all available space */ } Justify vs Align Property Axis What it controls justify-content Main axis (direction) How items are distributed along the main axis align-items Cross axis (perpendicular) How items are aligned on the cross axis align-content Cross axis How lines are distributed when multiple lines exist Common Patterns Center Anything .p