Design CSS Flexbox layouts visually — direction, wrapping, alignment, gaps, and per-item flex-grow/shrink/basis with live preview and instant code.
Tip: select which item to configure with the item picker above the preview, or check the generated code to see the exact CSS.
The two axes are the whole game. Flexbox runs on a main axis (set by flex-direction) and a cross axis (perpendicular to it). justify-content distributes items along the main axis; align-items positions them along the cross axis. Flip flex-direction: column and the axes swap: justify-content now controls vertical spacing, align-items controls horizontal. Half of all flexbox bugs are forgetting that column flips which property does what.
flex: 1 is a triplet, not a magic number. The shorthand expands to flex-grow flex-shrink flex-basis. flex: 1 = 1 1 0%: start from zero and grow equally with siblings. flex: 1 0 auto: grow to fill extra space but never shrink below natural size — the go-to for sidebar + content rows. flex: none = 0 0 auto: fixed size, no growing, no shrinking. When items unexpectedly wrap or overflow, check the basis first — a 200px basis plus gap can silently exceed the container.
margin: auto is the forgotten centering tool. On a flex item, margin-left: auto absorbs all leftover space on its left, pushing the item right — the classic navbar trick (logo left, links pushed right) with zero justify-content gymnastics. margin: auto on both axes centers an item perfectly, and it works even when other items have asymmetric sizes. This beats justify-content/align-items: center in every case where you need one-off alignment.
align-content only exists when you wrap. With flex-wrap: nowrap (the default) there is exactly one flex line, so align-content — which distributes multiple lines along the cross axis — silently does nothing. If you set align-content: center and see no effect, wrap your items and give the container height. In a row of wrapped chips, align-content: center is what keeps the lines visually balanced.
Flexbox vs Grid — the decision rule that never fails. One axis of flow = Flexbox. Two axes of structure = Grid. Navbars, toolbars, button groups, chip lists, form rows: Flexbox. Page skeletons, card dashboards, photo walls: Grid. The best pages use both: a Grid shell for the page region, Flexbox inside each cell for the alignment details. Fighting Flexbox to make a grid, or using Grid for a single row of buttons, is how layout code becomes unmaintainable.
Performance note. Flexbox layout is generally cheap — but it is not free. In our benchmark, reflowing a 10,000-element flex container takes ~5ms versus ~4ms for block layout (1.3x), and a wrapped flex row with complex alignment costs more than the same content in a grid. The real layout killer is never the display value — it is layout thrash: interleaving style writes with geometry reads (el.style.width = x; el.offsetWidth in a loop) forces the browser to re-layout on every iteration. Batch your reads and writes and the same 100-element loop drops from ~61ms to ~0.6ms. See CSS Grid Generator and read The Layout Tax and The Animation Tax for the full numbers.
See also: CSS Grid Generator · CSS Gradient Editor · Box Shadow Generator · Border Radius Generator · All CSS Tools