Updated · Built and checked by the PlinzoTools team, formulas tested against published sources
Build a flex container's CSS visually, with a live preview.
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
gap: 12px;CSS Flexbox is a powerful one-dimensional layout system, but its property names and behavior aren't always intuitive without seeing the result. This tool lets you adjust every major flex-container property and see the layout update live with sample boxes.
Adjust direction, justify-content, align-items, wrap, and gap. The preview boxes rearrange live, and the generated CSS updates alongside them.
flex-direction sets the main axis (row or column). justify-content aligns items along the main axis; align-items aligns them along the cross axis. flex-wrap controls whether items wrap onto multiple lines when they don't fit.
For 2-dimensional grid layouts instead, see the CSS Grid Generator.
The tool starts with direction row, justify-content center, align-items center, wrap nowrap and a gap of 12 pixels. Its output always contains six lines: display: flex; flex-direction; justify-content; align-items; flex-wrap; and gap in pixels. It writes all of them even when a value equals the browser default, so you can delete the lines you do not need after pasting. The rules belong on the parent container; the tool does not style individual children.
Imagine a hypothetical full-height section where a single card needs to sit in the exact middle. Keep direction as row, justify center and align center, then add a height to the container in your own CSS such as min-height: 100vh. The container's rule centers the card horizontally and vertically. A second common pattern is a navigation bar: choose row, justify space-between, align center. The logo lands on the left, links on the right, and both stay vertically centered.
The preview helps most when you change the direction. In a row, justify-content works horizontally and align-items works vertically. In a column, it flips: justify-content works vertically and align-items horizontally. Many layout bugs come from forgetting this swap, so when an alignment seems to do nothing, check the direction first.
The tool controls container properties only. Child-level properties such as flex-grow, flex-shrink, flex-basis, order and align-self are not generated. Add them by hand when a specific item needs to behave differently from its siblings, for instance letting one input take the remaining width.
justify-content aligns items along the main axis (horizontal in a row, vertical in a column); align-items aligns them along the perpendicular cross axis -- swapping flex-direction swaps which axis each property controls.
Flexbox excels at one-dimensional layouts (a single row or column of items); Grid excels at two-dimensional layouts (rows and columns together) -- many real interfaces use both, nested appropriately.
It controls whether flex items that don't fit on one line wrap onto additional lines (wrap) or are forced to shrink/overflow onto a single line (nowrap, the default).
The container probably has no extra height. Give it a height or min-height so there is free space on the cross axis to distribute.
Gap adds space only between items, not at the outer edges, so you do not need to remove the last item's margin. It is usually cleaner than margins for spacing lists of items.
Use wrap so tags move to the next line when they run out of room, and add a gap so the lines and items are evenly spaced.
Yes. Any flex item can itself be a flex container. Generate one rule per container and apply each to the right element.
Reference: MDN Web Docs