CSS Flexbox

Add display: flex to a parent element — it becomes the flex container. Its direct children automatically become flex items. Container properties control layout; item properties control individual behavior.

Before Flexbox, we used floats, clearfixes, and table-cell hacks. Vertical centering was notoriously difficult. Flexbox solved these problems elegantly.

align-items positions items on the cross axis. stretch is the default — items fill available height. center is the most common override for vertical centering.

Centering both horizontally and vertically was notoriously hard before Flexbox. Now: display: flex + justify-content: center + align-items: center. Done.

These patterns appear everywhere: nav bars, card footers, alerts, buttons with icons. Master space-between, center, and gap — you'll use them daily.

gap creates consistent spacing between flex items — no need for margin hacks. Use row-gap and column-gap for different spacing on each axis.

The classic responsive card grid: flex-wrap: wrap allows wrapping, gap handles spacing, and flex: 1 1 250px means cards grow/shrink but never go below 250px.

flex-shrink controls whether items can shrink below their basis. flex-shrink: 0 means "never shrink" — useful for fixed-width elements like logos or sidebars.

flex-basis sets the initial size before growing or shrinking. auto = use width/content. 0 = ignore content size. A pixel value = start at that size.

The flex shorthand combines grow, shrink, and basis. flex: 1 is the most common — it means "grow and shrink equally, distributing space evenly."

The order property changes visual order without changing HTML. Default is 0. Lower numbers appear first. Useful for responsive layouts where you want different order on mobile vs desktop.

Common pattern: on mobile, images come first for visual impact. On desktop, text comes first for F-pattern reading. Use order with media queries to achieve this without duplicating HTML.