CSS Flexbox Playground

Visually configure flexbox properties with live preview and copy-ready CSS output

Quick Presets

Container

Display

Direction

Justify Content

Align Items

Flex Wrap

Gap: 0px

Items

Grow

Shrink

Basis

Order

Grow

Shrink

Basis

Order

Grow

Shrink

Basis

Order

Preview

Item 1

Item 2

Item 3

CSS Code

.container {
  display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
align-content: stretch;
flex-wrap: nowrap;
}

.item {
  /* No custom item styles */
}

What is CSS Flexbox?

CSS Flexbox (Flexible Box Layout) is a powerful layout model that makes it easy to design flexible and responsive layouts. It provides an efficient way to arrange, distribute, and align items within a container, even when their size is unknown or dynamic.

How to Use This Playground

Select a preset layout or manually adjust container properties
Use the controls to modify flexbox properties in real-time
Add or remove items to see how the layout responds
Adjust individual item properties like flex-grow, flex-shrink, and order
Copy the generated CSS code and use it in your projects

Key Flexbox Properties

flex-direction

Defines the direction of flex items: row (horizontal), column (vertical), or reversed versions.

justify-content

Aligns flex items along the main axis: flex-start, center, flex-end, space-between, space-around, or space-evenly.

align-items

Aligns flex items along the cross axis: stretch, flex-start, center, flex-end, or baseline.

flex-wrap

Controls whether flex items wrap to multiple lines: nowrap, wrap, or wrap-reverse.

gap

Sets the space between flex items without affecting the container padding.

flex-grow

Defines how much a flex item will grow relative to other items when there's extra space.

flex-shrink

Defines how much a flex item will shrink relative to other items when space is limited.

order

Changes the visual order of flex items without modifying the HTML structure.

Common Use Cases

Creating responsive navigation bars
Building centered layouts
Designing card grids
Creating flexible sidebars
Building responsive hero sections
Creating equal-width columns
Aligning items in footers
Building mobile-first layouts

Browser Support

Flexbox is supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. For older browsers, consider using fallback layouts or CSS Grid as an alternative.