CSS Flexbox
One-dimensional layouts: align items in a row or column with justify-content, align-items, and gap
Knowledge Debt detected
You can study this freely — but your score may plateau if these foundations have gaps. The Mastery badge requires them to be solid.
Explanation
Flexbox solves one-dimensional layout: distributing items along a main axis (row or column) and aligning them on the cross axis.
Enable flex on the parent:
css .container { display: flex; /* enables flexbox */ flex-direction: row; /* default: left to right */ /* flex-direction: column; top to bottom */ /* flex-direction: row-reverse; right to left */ }
Main axis alignment — `justify-content`:
css justify-content: flex-start; /* default: pack to start */ justify-content: flex-end; /* pack to end */ justify-content: center; /* center all items */ justify-content: space-between; /* first at start, last at end, space in between */ justify-content: space-around; /* equal space around each item */ justify-content: space-evenly; /* equal space between items AND edges */
Cross axis alignment — `align-items`:
css align-items: stretch; /* default: items fill the cross axis */ align-items: center; /* center items on cross axis */ align-items: flex-start; /* align to start of cross axis */ align-items: flex-end; /* align to end of cross axis */ align-items: baseline; /* align by text baseline */
Wrapping:
css flex-wrap: nowrap; /* default: force all items on one line */ flex-wrap: wrap; /* wrap to next line when needed */
Spacing — use `gap`:
css .container { display: flex; gap: 16px; /* gap between all items */ gap: 8px 16px; /* row-gap column-gap */ }
Flex items — controlling individual children:
css .item { flex-grow: 1; /* grow to fill available space (0 = don't grow) */ flex-shrink: 1; /* shrink if needed (0 = don't shrink) */ flex-basis: 200px; /* starting size before grow/shrink */ flex: 1; /* shorthand: grow=1, shrink=1, basis=0 */ align-self: center; /* override parent's align-items for this item */ }
Centering anything:
css .center { display: flex; justify-content: center; /* horizontal */ align-items: center; /* vertical */ }
Examples
Navigation bar with flexbox
`space-between` pushes logo and links to opposite ends; nested flex on `.navbar__links` spaces them evenly with `gap`
/* Horizontal nav: logo left, links right */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 24px;
height: 64px;
}
.navbar__logo {
font-weight: bold;
font-size: 1.25rem;
}
.navbar__links {
display: flex;
gap: 24px;
list-style: none;
margin: 0;
padding: 0;
}
/* Center a single item vertically in the nav */
.navbar__cta {
align-self: center;
}Card grid that wraps
`flex: 1 1 280px` lets cards grow equally but wrap to a new row when they can't fit at 280px — a common responsive pattern without media queries
/* Flex container that wraps cards */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 24px;
padding: 24px;
}
/* Each card grows equally, minimum width before wrapping */
.card {
flex: 1 1 280px; /* grow=1, shrink=1, basis=280px */
/* Cards are at least 280px wide, grow equally to fill the row */
border: 1px solid #e5e7eb;
border-radius: 8px;
padding: 20px;
}
/* Perfect center inside a card */
.card__icon {
display: flex;
justify-content: center;
align-items: center;
width: 48px;
height: 48px;
background: #ede9fe;
border-radius: 50%;
}How well did you understand this?
Next in CSS & Styling
CSS Grid