Flexbox, visualised
Flexbox is the workhorse of one-dimensional CSS layout. The properties are simple individually but interact in ways that can be hard to predict — changing justify-content affects how space is distributed, changing align-items shifts cross-axis alignment, and flex-wrap changes how items flow to new lines.
This generator lets you toggle every flex container property and watch numbered items re-layout in real time. Use it to learn how flex properties interact, or to quickly produce a flex declaration for a layout you already have in mind.
Properties explained
- flex-direction — sets the main axis (row, column, or reversed).
- justify-content — distributes space along the main axis (start, end, center, between, around, evenly).
- align-items — aligns items along the cross axis (start, end, center, stretch, baseline).
- flex-wrap — controls whether items wrap to new lines or shrink to fit.
- gap — sets spacing between items, independent of alignment.