Flexbox
A CSS layout model for distributing space along a single axis (row or column).
Plain English
Flexbox is the go-to tool for arranging elements in a line — either horizontally or vertically. It excels at centering things, distributing leftover space evenly, and making items grow or shrink to fill a container. If you need to align a button group, space out nav items, or centre something both ways, flexbox is the answer.
Technical
Set display: flex on a container to activate flexbox. Key properties: flex-direction (row/column), justify-content (main-axis distribution), align-items (cross-axis alignment), flex-wrap (wrapping behaviour), and gap. Children become flex items and accept flex-grow, flex-shrink, flex-basis, and align-self. Unlike Grid, Flexbox is one-dimensional.
Live Demo
Row · Start
flex-row justify-startRow · Between
flex-row justify-betweenColumn · Center
flex-col items-centerRow · Wrap
flex-row flex-wrapFlexbox controls direction, alignment, and wrapping along a single axis.
Usage
✓ Good usage
Use display: flex + align-items: center + gap: 8px on a button container to perfectly align icons and text with consistent spacing.
✗ Bad usage
Using flexbox for a two-dimensional product grid — CSS Grid handles rows and columns simultaneously much better.
Recommended values
- justify-content: space-between — spread items to edges (nav, card footers)
- justify-content: center — centre a single item
- align-items: center — vertically centre items in a row
- flex-wrap: wrap + gap — responsive item groups that reflow
- flex: 1 on a child — make it fill remaining space
Common mistakes
- Using Flexbox for complex 2D layouts — Grid is the right tool for rows and columns at once.
- Forgetting that justify-content and align-items swap axes when flex-direction: column.
- Using margin: auto on flex children instead of gap — harder to maintain.
AI Prompt Example
Copy this into Claude, Cursor, Bolt, or v0.
Use display: flex, align-items: center, gap: 12px for the nav bar. Use flex: 1 on the search input to fill remaining horizontal space. Wrap button groups with flex-wrap: wrap.