Flexbox Playground

Flexbox (the CSS Flexible Box Layout) is a one-dimensional layout system: it distributes space and aligns items along a single axis — either a row or a column. That single-axis focus is what makes it the right tool for components (nav bars, toolbars, form rows, card footers) and the wrong tool for true grids, where CSS Grid is a better fit.

The three properties you'll reach for most

• flex-direction picks the main axis. row is left-to-right, column is top-to-bottom, and the -reverse variants flip direction.
• justify-content aligns items along the main axis —flex-start, center, space-between, and space-evenly cover 90% of real layouts.
• align-items aligns items on the cross axis. stretch (the default) makes all items the same cross-size; center is the magic one for vertical centering.

On the children: flex shorthand

On flex items, flex: 1 1 0means "grow to fill free space, shrink if needed, start from zero basis" — the behavior you probably want for equal-width columns. flex: 0 0 auto freezes an item at its content size (good for icons and fixed sidebars). gap on the container is the modern way to space items; avoid margin-based spacing, which breaks with wrapping.