CSS Flexbox Generator
Visually design flexbox layouts. Adjust direction, alignment, wrap, gap, per-item grow/shrink/basis, and item count — copy the CSS in one click.
Tip: click another item box in the preview to edit it.
Click any item box to edit its grow / shrink / basis / align-self.
About this tool
A visual builder for CSS Flexbox layouts. Adjust flex-direction, justify-content, align-items, align-content, flex-wrap, gap and item count, and the preview updates instantly to show how flex items arrange themselves. Click any item box in the preview to set that item's flex-grow, flex-shrink, flex-basis, and align-self — the generated CSS includes a per-item rule only when you've changed it from the defaults.
Example: set flex-direction: row, justify-content: space-between, align-items: center and 3 items — you get the classic navigation bar layout where items spread to the edges and align vertically centered. To make the middle item take up all extra space, click it and set flex-grow: 1.
Helpful when flexbox alignment behaviors feel unintuitive, when you want to compare justify-content vs align-items side by side, or when onboarding teammates to flex layout concepts.
FAQ
What is the difference between justify-content and align-items? ›
justify-content distributes items along the main axis (the direction flex-direction points). align-items positions items along the cross axis, perpendicular to the main axis.
Why does flex-wrap matter? ›
By default flex items shrink to fit one line. Setting flex-wrap: wrap lets items flow onto new lines when they exceed the container width, which is essential for responsive card grids.
What do flex-grow and flex-shrink do? ›
flex-grow controls how much a flex item grows to fill free space (0 = never grow, 1 = grow equally with siblings). flex-shrink is the opposite — how much it shrinks when space is scarce. flex-basis sets the initial size before growing or shrinking happens.
How do I center a single element with flexbox? ›
Set the parent to display:flex; justify-content:center; align-items:center. This centers the child both horizontally and vertically — a common replacement for older margin tricks.
When should I use grid instead of flexbox? ›
Flexbox works best for one-dimensional layouts: navigation bars, rows of cards, or centering a single element. For two-dimensional layouts where you need to control both rows and columns simultaneously — magazine-style pages, dashboards, full-page layouts — use the CSS Grid Layout Builder.