Flexbox: Stop Fighting CSS Layout
Flexbox is a one-dimensional layout system. It handles either rows or columns (not both — that's Grid). Once you understand the two axes and a handful of properties, you'll never use float hacks again.
The Two Axes
flex-direction: row (default)
Main Axis →→→→→→→→→→→→→→→→→
↓ Cross Axis
↓
↓
↓
flex-direction: column
Main Axis ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
→ Cross Axis →→→→→→→→→→→→justify-content works along the main axis. align-items works along the cross axis.
Container Properties
.container {
display: flex;
/* Direction */
flex-direction: row; /* → left to right (default) */
flex-direction: row-reverse; /* ← right to left */
flex-direction: column; /* ↓ top to bottom */
flex-direction: column-reverse; /* ↑ bottom to top */
/* Wrapping */
flex-wrap: nowrap; /* single line (default) */
flex-wrap: wrap; /* wrap to next line */
/* Main axis alignment */
justify-content: flex-start; /* |■ ■ ■ | */
justify-content: center; /* | ■ ■ ■ | */
justify-content: flex-end; /* | ■ ■ ■| */
justify-content: space-between; /* |■ ■ ■| */
justify-content: space-around; /* | ■ ■ ■ | */
justify-content: space-evenly; /* | ■ ■ ■ | */
/* Cross axis alignment */
align-items: stretch; /* items fill the container height (default) */
align-items: flex-start; /* items at the top */
align-items: center; /* items centered vertically */
align-items: flex-end; /* items at the bottom */
align-items: baseline; /* items aligned by text baseline */
/* Gap between items */
gap: 16px; /* row and column gap */
row-gap: 16px; /* gap between rows */
column-gap: 8px; /* gap between columns */
}Item Properties
.item {
/* Grow: how much of remaining space to take */
flex-grow: 0; /* don't grow (default) */
flex-grow: 1; /* take equal share of remaining space */
/* Shrink: how much to shrink when space is tight */
flex-shrink: 1; /* shrink equally (default) */
flex-shrink: 0; /* never shrink */
/* Basis: initial size before grow/shrink */
flex-basis: auto; /* use content size (default) */
flex-basis: 200px; /* start at 200px */
flex-basis: 0; /* ignore content size, distribute all space */
/* Shorthand (most common) */
flex: 1; /* flex: 1 1 0% — grow equally, ignore content */
flex: 0 0 200px; /* fixed 200px, no grow, no shrink */
/* Override alignment for this item */
align-self: center; /* center this item, others stay at default */
/* Order */
order: 0; /* default */
order: -1; /* move to beginning */
order: 1; /* move to end */
}Common Patterns
/* Center everything (the classic) */
.center-all {
display: flex;
justify-content: center;
align-items: center;
}
/* Navigation bar */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
}
/* Sidebar + main content */
.layout {
display: flex;
}
.sidebar { flex: 0 0 250px; } /* fixed 250px */
.main { flex: 1; } /* takes remaining space */
/* Equal-width columns */
.columns {
display: flex;
gap: 16px;
}
.columns > * { flex: 1; }
/* Card grid that wraps */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.card-grid > * {
flex: 1 1 300px; /* min 300px, grow to fill */
}
/* Footer stuck to bottom */
.page {
display: flex;
flex-direction: column;
min-height: 100vh;
}
.page > main { flex: 1; }
.page > footer { /* stays at bottom */ }CSS reference: CSS Cheatsheet — Flexbox, Grid, and all CSS properties in one searchable page.