CSS Flexbox Builder

About the CSS Flexbox Builder

Every control here maps directly onto a real CSS flex container, so the numbered boxes above rearrange exactly as the same rules would behave in a browser. Switch direction to column to see how justify-content and align-items swap axes, or add more items and turn on wrap to watch a new row form once the container runs out of space.

Why justify-content and align-items seem to "swap" when you change direction

This is the single most common point of confusion in flexbox, and dragging the direction dropdown here is the fastest way to internalize it. Flexbox always has a main axis and a cross axis, and justify-content only ever controls spacing along the main axis, while align-items only ever controls spacing along the cross axis. When flex-direction is row, the main axis runs horizontally, so justify-content moves items left-to-right and align-items moves them top-to-bottom. Switch to column and the main axis rotates to vertical, so now justify-content controls the vertical spacing and align-items controls horizontal centering instead. Nothing about the two properties actually changed, only which physical direction "main" and "cross" point in did.

Why gap is safe to use here without a vendor prefix or fallback

The gap property (formerly known as grid-gap) was originally exclusive to CSS Grid, and for years using gap inside a flex container simply did nothing in most browsers. That changed around 2020-2021, when Chrome, Firefox, and Safari all shipped flexbox support for gap within a short window of each other, it's now safe to use in any reasonably current browser without needing the older workaround of adding margin to each child and negative margin to the container to fake spacing between items.

A real limitation: no align-content control

This builder covers direction, justify-content, align-items, wrap, and gap, but it doesn't expose align-content, a separate property that only becomes visible once flex-wrap is set to wrap and the container has multiple lines of items with leftover space along the cross axis. Where align-items positions items within their own line, align-content controls how the lines themselves are spaced or packed relative to each other, similar to justify-content but for the wrapped rows as a group. If your layout wraps into several rows and you need to control the gap between those rows specifically, you'll need to add that property by hand to the copied CSS.

This builder covers the container, not the individual items

Everything here configures container-level flex properties. Item-level properties, flex-grow, flex-shrink, flex-basis (or the flex shorthand combining all three), order, and align-self, are set on the individual children rather than the container, and this tool's uniform colored boxes don't demonstrate them. In a real layout, those item-level properties are what let one specific child grow to fill remaining space, shrink before its siblings do, or override the container's align-items for just that one element.

A subtle accessibility gotcha with row-reverse and column-reverse

Setting direction to row-reverse or column-reverse visually reverses the order items appear on screen, but it does not change the underlying HTML source order, and that distinction matters for keyboard and screen reader users. Tab order and screen reader reading order both follow the DOM's actual markup sequence, not the CSS-driven visual order, so a reversed flex layout can visually show item 5 first while a keyboard user still tabs to item 1 first. If visual and logical order genuinely need to match, reorder the actual HTML elements rather than relying on a reverse direction value, especially on any layout with interactive elements like links, buttons, or form fields.