زمین‌بازی CSS Flexbox

A visual flexbox generator that writes the CSS for you

This flexbox generator turns CSS Flexible Box Layout into something you can see. Instead of guessing what justify-content or align-items will do, you toggle each property on a labelled control and watch a live preview rearrange instantly — then copy clean, production-ready code. It runs entirely in your browser, with no sign-up and nothing uploaded.

It's a true flexbox playground: a real flex container with editable child items, full container and per-item controls, nested containers, a resizable responsive preview, and a shareable URL. Whether you're learning flexbox or quickly building a navbar, card row, or centered hero, you can get the exact layout — and the CSS, Tailwind or Bootstrap to match — in seconds.

Every container property, with a live preview

Control the container the way the spec does. Set flex-direction (row, row-reverse, column, column-reverse) to choose the main axis, justify-content to space items along it, and align-items to align them on the cross axis. Turn on flex-wrap to let items flow onto new lines, use align-content to space those wrapped lines, and dial in independent row and column gap values.

A built-in axis legend shows which direction is the main axis and which is the cross axis as you change flex-direction, so the relationship between justify-content and align-items finally clicks. It's a hands-on flexbox cheat sheet you learn by doing.

Per-item control: grow, shrink, basis, order and align-self

Most generators stop at the container. This one lets you click any item in the preview and edit it individually: set flex-grow, flex-shrink and flex-basis (the flex shorthand), override its align-self, and change its order to reposition it without touching the HTML. Add or remove items to test how space redistributes.

That makes it straightforward to build real patterns — a fixed sidebar beside a flexible main column (flex: 0 0 240px next to flex: 1), a single centered item, or a footer link pushed to the far end with margin-left: auto.

Nested flexbox and a responsive preview

Real layouts nest. Any item can become its own nested flex container with its own direction, justify and align settings — exactly what a nested flexbox generator needs for cards that hold a header row above a body, or a toolbar inside a toolbar. The generated code includes the nested rules too.

Because flexbox is about responsive behaviour, the preview is resizable: drag the handle or pick a Mobile / Tablet / Desktop width preset and watch items wrap and realign at each size. It's the fastest way to confirm a responsive flexbox layout behaves before you ship it.

Copy as CSS, Tailwind or Bootstrap — and how this compares to other tools

Switch the output tab to get the format your project uses. CSS gives you clean .container and per-item rules using the flex shorthand. Tailwind writes the utility classes — flex, flex-col, justify-between, items-center, gap-4, flex-1, order-2 — on a ready-to-paste HTML snippet. Bootstrap outputs the equivalent d-flex utility classes. Only the properties you actually changed are emitted, so the output stays minimal and readable instead of repeating every default.

Other visual generators like Flexbox.help and Loading.io's flexbox generator give you the container properties but skip per-item controls and nested containers. Tailwind's online playground doesn't generate vanilla CSS. This tool does all three output formats, handles nesting, and runs offline once loaded — no account, no cost, no data leaving your browser.

The two-axis mental model: main axis, cross axis, and why justify vs align confuses everyone

Flexbox operates on two perpendicular axes. The main axis is the direction flex items are placed — set by flex-direction. With flex-direction: row (the default), the main axis runs left to right. With flex-direction: column, it runs top to bottom. The cross axis is always perpendicular to it: vertical when the main axis is horizontal, horizontal when the main axis is vertical.

The reason justify-content and align-items confuse developers is that their names seem arbitrary until you pin them to the axes. justify-content always controls the main axis — it distributes extra space along the direction items flow. align-items always controls the cross axis — it determines how items are positioned on the perpendicular dimension. Flip flex-direction to column and the two properties visually swap roles, because the axes have swapped, but the rule is unchanged: justify = main, align = cross.

There is also align-content, which only activates when flex-wrap: wrap produces multiple lines. It controls how those lines are spaced on the cross axis, while align-items handles individual item alignment within each line. Keeping the axis model in mind — draw a horizontal arrow and a vertical arrow, label one 'main' and one 'cross' based on flex-direction, then assign justify and align accordingly — eliminates nearly every flexbox property-confusion bug.

The flex shorthand decoded: flex: 1, flex: auto, and flex: none are not the same thing

The flex shorthand packs three values: flex-grow, flex-shrink, and flex-basis. flex-basis is the item's hypothetical size before free space is distributed — think of it as a starting point. flex-grow is a ratio that governs how an item expands to fill leftover space; 0 means it never grows, 1 means it takes a proportional share. flex-shrink mirrors this for overflow: 1 allows the item to shrink, 0 locks it at its basis even if the container is too small.

flex: 1 expands to 1 1 0%. The key is that basis of 0%: all items start with zero intrinsic size, so free space is divided purely by their grow ratios — every flex: 1 item lands at exactly the same width regardless of its content. flex: auto expands to 1 1 auto. Here the basis is auto, meaning each item's content width is taken into account first, and only the remaining space is shared out. A short item and a long item with the same flex: auto will not be equal width. flex: none is 0 0 auto: the item neither grows nor shrinks, sitting at exactly its natural size no matter what.

In practice this difference matters constantly. Equal-width navigation tabs want flex: 1 (equal division, content ignored). A tag list that should overflow gracefully wants flex: none on each tag. A form with a fixed label and a stretchy input uses flex: 0 0 120px on the label and flex: 1 on the input. Understanding the three sub-properties individually — rather than memorising shorthand values — makes it straightforward to reason about any sizing problem.

Common Flexbox layout patterns worth knowing by heart

Perfect centering is the most-searched flexbox technique: set display: flex; justify-content: center; align-items: center; on the container, give it a height (such as min-height: 100vh for full-screen), and the child sits dead-center regardless of its size. It works for modals, hero sections, loading spinners, and empty-state illustrations. Before flexbox this required a combination of absolute positioning and negative margins; now it is two declarations.

A sticky footer needs the page to fill at least the viewport height and the main content to expand to push the footer down. Wrap the page in display: flex; flex-direction: column; min-height: 100vh; and give the main content area flex: 1 — it grows to fill all remaining vertical space so the footer always sits at the bottom even on short pages. Equal-height columns come for free: because flex items on the same row stretch to match the tallest sibling by default (align-items: stretch), a multi-column card layout has uniform column heights with no JavaScript required. A navbar with logo left and links right uses justify-content: space-between on the flex row, or simply puts margin-left: auto on the link group to push it to the far end — a powerful trick because auto margins in flexbox consume all available free space before the item is positioned.

Card grids with flex-wrap combine flex-wrap: wrap on the container with flex: 1 1 280px on each card — cards fill a row and wrap when they no longer fit at 280 px. This is a clean alternative to CSS Grid for content of unknown length, and it degrades well on narrow screens because cards wrap naturally rather than overflowing. Pairing with gap instead of margins avoids the classic 'last-row gap' problem that margin caused when rows ended mid-line.

Accessibility: when the order property breaks screen readers and keyboard navigation

Flexbox's order property and the flex-direction: row-reverse / column-reverse values change how items appear visually without touching the underlying HTML source order. The browser paints them in a different sequence, but assistive technologies and keyboard navigation follow DOM order, not visual order. A sighted mouse user sees Tab 3, Tab 1, Tab 2; a screen-reader user hears Tab 1, Tab 2, Tab 3; a keyboard user pressing Tab moves through the elements in DOM order, which may skip over what appears visually adjacent.

WCAG Success Criterion 1.3.2 (Meaningful Sequence) requires that when the sequence of content affects meaning, the correct reading order can be programmatically determined — which means it must be reflected in the DOM. Reordering items purely with CSS violates this when the order is meaningful (navigation, step-by-step flows, data tables). The MDN documentation for order explicitly warns: 'Do not use order for anything that might affect how it is read by a screen reader.' The safe approach is to reorder items in the HTML source whenever the order matters, and reserve the CSS order property only for purely decorative visual shifts where the content makes equal sense in either sequence.

Related considerations apply to flex-direction: row-reverse used for right-to-left visual layouts on LTR pages — the text inside items still reads left-to-right, creating a mismatch between visual and reading order. True RTL support should use the HTML dir attribute and logical CSS properties (margin-inline-start, padding-inline-end) rather than reversing flex direction. When auditing a flexbox layout for accessibility, check whether any reordering is meaningful, confirm keyboard tab stops move in a logical visual sequence, and verify that no important content is skipped or out of sequence for users who rely on sequential navigation.