How do I generate flexbox CSS code?

Use our Flexbox Playground above: visually adjust container properties (flex-direction, justify-content, align-items, flex-wrap, gap) and item properties (flex-grow, flex-shrink, order). The CSS code updates in real-time — copy it directly into your project.

What is the difference between justify-content and align-items?

justify-content controls alignment along the main axis (horizontal in row direction, vertical in column). align-items controls alignment along the cross axis (perpendicular to main). For example, in a row layout: justify-content centers horizontally, align-items centers vertically.

Flexbox Playground

Visually build flex layouts and generate CSS code instantly.

flex-direction

justify-content

align-items

flex-wrap

align-content

gap

Items Count

Select an item in the preview to edit its properties.

Live Preview

CSS Code

What is CSS Flexbox?

The Flexible Box Layout Module, commonly known as Flexbox, is a CSS web layout model designed to provide a more efficient way to lay out, align, and distribute space among items in a container, even when their size is unknown or dynamic. Flexbox is incredibly powerful for 1D (one-dimensional) layouts, meaning it excels at handling elements in either a single row or a single column.

Unlike older layout techniques using floats or positioning, Flexbox is inherently responsive. Items within a flex container can shrink to prevent overflowing or grow to fill available empty space, making it perfect for building responsive navigation bars, card grids, and centered content.

Flex Container vs Flex Items

A Flexbox layout consists of two primary components:

The Flex Container: The parent element that holds the layout. You initialize it by applying display: flex; or display: inline-flex;. Properties applied to the container (like justify-content, align-items, and flex-direction) control the overall layout and alignment of its direct children.
The Flex Items: The direct children of the flex container. While the container handles the overall flow, you can target individual items to override rules. Properties like flex-grow, flex-shrink, and align-self allow you to control how a specific item behaves relative to the others.

How to Use This Playground

This interactive Flexbox generator runs entirely in your browser, meaning it works instantly and fully offline after the initial load. It requires absolutely no external API calls, keeping your workflow fast and private.

Global Alignment: Ensure the Container tab is selected. Try changing justify-content to align items along the main axis, or align-items to adjust them along the cross axis. Modify the gap to quickly add spacing between elements without needing complex margins.
Individual Item Tweaks: Click on any numbered square in the Live Preview window. The tool will automatically switch to the Item tab, allowing you to tweak specific properties for that single element. For example, increase an item's flex-grow to make it consume more available space than its siblings.
Export Your Code: As you tweak the layout visually, the generator writes the exact CSS code for you in real-time. Once your layout looks right, click the Copy CSS button and paste it directly into your project's stylesheet.