Flexbox Playground
Experiment with flex properties and see the CSS update live
Experiment with flex properties and see the CSS update live
Preview scrolls horizontally when items exceed container width.
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;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.
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 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.