Tweak flex container and item properties and see the layout update live. Export ready-to-paste display: flex rules with
justify-content, align-items, gap, and per-item flex values. Runs entirely in your browser — no uploads.
Flexbox is a one-dimensional layout model: a flex container lays out its items along a main axis (defined by
flex-direction) and a cross axis. It excels at distributing space, aligning groups of items, and building responsive toolbars, cards, and stacked sections without fragile floats.
Properties like justify-content, align-items, flex-wrap, and gap apply to the container. Properties like
flex-grow, flex-shrink, and flex-basis (often written as the flex shorthand) apply to items. This playground applies the same
item values to every child so you can learn the basics; real pages often mix different values per item.
Use Flexbox for aligning items in a row or column and letting them grow or shrink along one axis. Use Grid when you need explicit two-dimensional tracks (rows and columns at once). Many UIs combine both: Grid for page shells, Flexbox for components inside cells.
min-width (or min-width: 0) fixes many overflow issues.
flex-wrap: wrap).
flex-grow, flex-shrink, flex-basis, and min-width to see how items share space.No. The preview and generated CSS are computed in your browser only.
Default min-width: auto can block shrinking. Try lowering min-width on the item or set min-width: 0 in your stylesheet when using overflow or nested flex.
justify-content distributes items along the main axis (horizontal in row, vertical in column). align-items aligns items
along the cross axis for each line.
When wrapped flex lines leave extra space along the cross axis, align-content controls how those lines are packed. With a single line, it often has little visible
effect.
Yes. margin: auto absorbs extra space on flex items and is a classic way to push one item to the end of a toolbar. This playground does not generate margins — add them in your CSS.
gap is simpler and symmetric; margins are still fine when you need asymmetric spacing or to target specific breakpoints. Prefer gap for new layouts when browser support
fits your audience.
No. The tool outputs flex-grow, flex-shrink, and flex-basis explicitly. You can combine them as flex: 1 1 120px in your own code for brevity.
inline-flex makes the container shrink-wrap its size like an inline element while still laying out children as flex items. Use it for badges, pills, or inline toolbars.
It can be, especially with nested flex containers. Large app shells often use CSS Grid for macro layout and Flexbox inside components — use whatever keeps your CSS maintainable.