One-dimensional layout system for flexible responsive designs
Flexbox is a one-dimensional layout method for arranging items in rows or columns. Items flex to fill additional space or shrink to fit smaller spaces. Perfect for navigation bars, card layouts, and centering content.
Key Advantage: Makes alignment and distribution of space incredibly easy, even when item sizes are unknown.
Turn any element into a flex container to control its children.
.container { display: flex; }
Effect: Direct children become flex items and line up in a row by default
Defines the main axis direction (row or column).
.container { flex-direction: row; }
Values: row (default, left to right), row-reverse, column (top to bottom), column-reverse
Aligns items along the main axis (horizontal if row, vertical if column).
.container { justify-content: center; }
Common values: flex-start, center, flex-end, space-between, space-around, space-evenly
Aligns items along the cross axis (vertical if row, horizontal if column).
.container { align-items: center; }
Common values: stretch (default), flex-start, center, flex-end, baseline
Centering trick: justify-content: center; align-items: center; (perfect center!)
Controls whether items wrap onto multiple lines.
.container { flex-wrap: wrap; }
Values: nowrap (default, single line), wrap (multiple lines), wrap-reverse
Creates space between flex items.
.container { gap: 20px; }
Example: 20px space between all items
Controls how flex items grow and shrink. Applied to flex items, not the container.
.item { flex: 1; }
Example: All items grow equally to fill available space
Shorthand for: flex-grow, flex-shrink, flex-basis