Build flexbox layouts visually. Toggle container properties, customize individual items, and see colored boxes rearrange in real-time. Copy the generated CSS or Tailwind classes with one click.
Click an item in the preview to select it and customize its individual flex properties.
.container {
display: flex;
gap: 10px;
}row (default): items flow left to right. column: items flow top to bottom. -reverse variants flip the direction.
Aligns items along the main axis. flex-start: pack to start. center: center items. space-between: equal space between items. space-around: equal space around items. space-evenly: truly equal spacing.
Aligns items along the cross axis. stretch (default): fill the container. center: center on the cross axis. baseline: align text baselines.
nowrap (default): all items on one line, may overflow. wrap: items wrap onto new lines. wrap-reverse: items wrap in reverse order.
Only applies when wrapping is on. Controls how multiple lines are distributed on the cross axis. Works like justify-content but for wrapped lines.
order: controls visual order (lower values come first). flex-grow: how much an item should grow relative to siblings. flex-shrink: how much an item should shrink. flex-basis: initial size before growing/shrinking. align-self: overrides align-items for one item.
CSS Flexbox (Flexible Box Layout Module) is a CSS layout model designed for distributing space and aligning content within a container. Unlike older layout techniques that relied on floats and clearfixes, Flexbox treats layout as a first-class concern. You set display: flex on a container, and its children become flex items that you can position, align, and size with intuitive properties.
Flexbox operates along a main axis (set by flex-direction) and a cross axis (perpendicular to the main axis). This one-dimensional model makes it ideal for navigation bars, card rows, form layouts, centering content, and any arrangement where items flow in a single direction. Flexbox has 99.5% global browser support and has been widely supported since approximately 2015, making it a safe choice for production CSS.
Step 1: Set container properties. Use the controls panel on the left to choose flex-direction, justify-content, align-items, and flex-wrap. The preview updates instantly as you toggle each option.
Step 2: Adjust gap and item count. Slide the gap control to add spacing between items. Add or remove items with the item count slider to match your real layout needs.
Step 3: Customize individual items. Click any colored box in the preview to select it. Set per-item properties like order, flex-grow, flex-shrink, flex-basis, and align-self to see how they affect that specific item.
Step 4: Copy the code. Switch between CSS and Tailwind tabs in the code output, then click Copy to get the generated code. Paste it directly into your project.
Live visual preview. Colored boxes rearrange in real-time as you toggle properties. No generate button, no page reload. You see exactly how your flexbox layout behaves as you build it.
Complete property coverage. Every major flexbox container property is supported: flex-direction, justify-content, align-items, flex-wrap, align-content, and gap. Per-item properties include order, flex-grow, flex-shrink, flex-basis, and align-self.
CSS and Tailwind output. Get clean, production-ready code in either vanilla CSS or Tailwind utility classes. The CSS output only includes properties that differ from defaults, keeping your code minimal.
Per-item customization. Click any item to select it and configure its individual flex properties. This helps you understand how flex-grow, flex-shrink, and align-self interact with the container settings.
Built-in cheat sheet. Expand the collapsible reference below the code output for a quick reminder of what each property does, without leaving the tool.
flex-direction sets the main axis. row (default) lays items out left-to-right. column stacks them top-to-bottom. The -reverse variants flip the starting point.
justify-content controls how items are distributed along the main axis. space-between puts equal space between items with no space at the edges. space-evenly distributes space so all gaps, including edges, are identical.
align-items positions items on the cross axis. stretch (default) makes items fill the container height. center vertically centers them. baseline aligns items by their text baselines.
flex-wrap determines whether items wrap onto new lines. When wrapping is enabled, align-content controls how the wrapped lines are distributed on the cross axis.
gap adds consistent spacing between items without margins. It applies between items only, not at the container edges. Introduced in CSS3, gap for flexbox is now supported in all modern browsers.
flex-grow / flex-shrink / flex-basis form the shorthand flex property. Together they control how items expand, contract, and what their initial size is before the flex algorithm distributes space.
Last updated: March 2026