Build flexbox layouts without memorizing every property. Set direction, alignment, wrapping and gaps, watch the live preview, and copy clean CSS. Free and instant.
Flex container
Tweak the properties and watch the preview.
Live preview and code
Advertisement
How it works
Pick the container properties and the preview rebuilds instantly with numbered demo boxes. justify-content distributes items along the main axis, align-items along the cross axis, and gap sets uniform spacing without margin hacks.
The code box shows the minimal CSS for your container, ready to copy into your project.
Flexbox mental model
Think in two axes: the main axis follows flex-direction (row goes left to right), the cross axis runs perpendicular. Justify works on the main axis, align on the cross axis.
For one-dimensional layouts, rows or columns of items, flexbox is the right tool. For two-dimensional grids with rows and columns, reach for CSS grid instead.
What is the difference between justify-content and align-items?
justify-content positions items along the main axis (horizontal in a row), while align-items positions them along the cross axis (vertical in a row). Flip to a column direction and the axes swap.
How do I center something both ways with flexbox?
Set display flex, justify-content center and align-items center on the parent. That is the classic two-line centering trick flexbox is famous for.
Should I use gap or margins between flex items?
Use gap. It adds space only between items, never around the edges, and it collapses cleanly when items wrap. Margins double up at wrap points.
When should I use flexbox instead of CSS grid?
Flexbox for one-dimensional layouts: navbars, button rows, card lists in a single row or column. Grid for two-dimensional layouts where you control rows and columns together.
Does the generated CSS work in all browsers?
Yes. The properties generated here are supported unprefixed in all modern browsers. Very old Internet Explorer versions need prefixes, but those are long dead.