Build a CSS flexbox layout visually
Build a flexbox layout visually: direction, justify, align, and gap, with live preview and copyable CSS.
Row lays items left to right, column stacks them top to bottom. The reverse options flip the order.
justify-content spaces items along the main axis, align-items positions them on the cross axis.
display: flex plus the four properties you set, ready to paste onto a container.
Frequently asked
What's the difference between justify-content and align-items?
justify-content controls spacing along the main axis (horizontal for row, vertical for column). align-items controls positioning on the cross axis, perpendicular to the main one.
Why do my items look different when I switch to column direction?
Switching direction swaps which axis is 'main' and which is 'cross', so justify-content and align-items effectively trade places. That's standard flexbox behavior, not a bug.
Does the item count in the preview matter for the CSS?
No, it's just there so you can see how the layout behaves with more or fewer items. The generated CSS only describes the container, not how many children it has.