CSS Flexbox Properties Table
| Property | Target | What it does |
|---|---|---|
| display: flex | Container | Enables flex context for all children |
| flex-direction | Container | row (default), column, row-reverse, column-reverse |
| flex-wrap | Container | nowrap (default), wrap, wrap-reverse |
| justify-content | Container | Main axis alignment: flex-start, center, space-between, space-around |
| align-items | Container | Cross axis alignment: stretch (default), center, flex-start, baseline |
| gap | Container | Spacing between items (replaces margin hacks) |
| flex-grow | Item | How much the item grows relative to siblings (default 0) |
| flex-shrink | Item | How much the item shrinks when space is tight (default 1) |
| flex-basis | Item | Initial size before grow/shrink apply (default auto) |
| flex | Item | Shorthand: flex-grow flex-shrink flex-basis (flex: 1 = 1 1 0%) |
| align-self | Item | Overrides the container\u2019s align-items for this item |
| order | Item | Controls visual order without changing DOM order |
CSS Flexbox solves one-dimensional layout - arranging items in a row or column with control over alignment, spacing and size distribution. The twelve properties split into two groups: container properties (display, flex-direction, flex-wrap, justify-content, align-items, gap) that set up the layout, and item properties (flex-grow, flex-shrink, flex-basis, flex, align-self, order) that control individual behaviour.
The one-liner that replaced twenty lines of float hacks: display: flex; align-items: center; justify-content: center; - perfect centering, both axes, no negative margins.
How to use
- Filter by property name or target (container/item) to find what you need.
- Click any property to copy it into your CSS.
- Remember the two-axis model: flex-direction defines the main axis, and justify-content/align-items work on main/cross axes respectively.
Frequently asked questions
What is the difference between justify-content and align-items?
justify-content aligns items along the main axis (the direction set by flex-direction: horizontal for row, vertical for column). align-items aligns along the cross axis (perpendicular to main). For a row layout: justify-content controls horizontal spacing, align-items controls vertical alignment.
What does flex: 1 actually set?
It sets flex-grow: 1, flex-shrink: 1, flex-basis: 0% - meaning all items with flex: 1 share available space equally regardless of their content size. The default is flex: 0 1 auto (no growth, shrink allowed, size from content). Setting flex: 1 on multiple items is the standard equal-width column pattern.
Why is gap better than margin for spacing?
gap adds space between items without affecting the outer edges - no more margin-left: 0 on the first child or negative margin hacks. It also works with flex-wrap, adding spacing between wrapped rows, which margins cannot do. Browser support is universal since 2020.
When should I use flexbox vs CSS Grid?
Flexbox for one-dimensional layouts (a toolbar, a nav bar, a card row). Grid for two-dimensional layouts (page structure with rows and columns). They compose: a grid cell can be a flexbox container. Use flexbox when you care about how items flow in one direction; use grid when you need to place items in both dimensions.