Flexbox Playground

Related Tools

View all tools →
Gradient Builder
Try free →
Shadow Generator
Try free →
Border Radius Lab
Try free →
Glassmorphism
Try free →
Palette Generator
Try free →
Contrast Checker
Try free →

What Is Flexbox?

CSS Flexbox is a layout model designed for distributing space and aligning items within a container — even when their sizes are unknown or dynamic. Before Flexbox, centering elements and creating equal-height columns required hacks with floats, tables, or absolute positioning. Flexbox solved all of that with a clean, intuitive property system.

This playground lets you experiment with the main Flexbox properties in real time: flex-direction, justify-content, align-items, flex-wrap, gap, and individual item properties like flex-grow, flex-shrink, flex-basis, order and align-self. See exactly how each property affects your layout without writing a line of code.

Key Flexbox Properties

flex-direction controls the main axis (row or column). justify-content distributes items along the main axis (flex-start, center, flex-end, space-between, space-around, space-evenly). align-items aligns items on the cross axis (stretch, flex-start, center, flex-end, baseline). flex-wrap determines whether items wrap to new lines or stay in one row.

Tips for Using Flexbox

How to Use This Flexbox Playground

  1. Set the flex container properties — Configure flex-direction, justify-content, align-items, flex-wrap, and gap on the parent container.
  2. Add and remove flex items — Add child elements and see how they distribute within the container based on your settings.
  3. Adjust individual item properties — Set flex-grow, flex-shrink, flex-basis, and align-self on individual items to control their sizing behavior.
  4. Experiment with layouts — Load a layout pattern (centered content, sidebar + main, equal columns, holy grail, wrapping cards) from the Layout patterns buttons and adjust it.
  5. Copy the CSS — Copy the CSS for the container and every item, and the matching HTML; pasted into a page, it lays out like the preview.

Tips and Best Practices

See also: Horizontal flex layouts pair well with the Scroll Snap Generator for carousel-style snap-scrolling.

Frequently Asked Questions

What is CSS Flexbox?+
CSS Flexbox (Flexible Box Layout) is a one-dimensional layout model: it lays items out along one axis, a row or a column, and distributes space and alignment along that axis and across it. It handles centering, equal-width columns, spacing and reordering without floats or positioning tricks.
When should I use Flexbox vs CSS Grid?+
Use Flexbox for one-dimensional layouts: a row of buttons, a navigation bar, a card's header, items that should wrap as space runs out. Use CSS Grid when rows and columns must line up together, such as a page layout or a card grid with aligned columns. They combine well: Grid for the page, Flexbox inside each cell.
How do I center a div with Flexbox?+
Put display: flex; justify-content: center; align-items: center; on the parent. The parent needs some height for the vertical centering to show (the Center pattern in the playground uses min-height: 300px).
What does flex: 1 mean?+
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1 and flex-basis: 0%. Each item starts from zero and takes an equal share of the free space, so siblings with flex: 1 end up the same size, unless one item's content is wider than its share: flex items do not shrink below their content by default (min-width: auto), so add min-width: 0 to let them.
Why doesn't align-items: stretch stretch my item?+
Stretch only applies to an item whose cross size is auto. If the item has a height (in a row) or a width (in a column), that size wins. In the playground, tick height: auto on an item to see it stretch.
What is the difference between align-items and align-content?+
align-items places items within their line. align-content places the lines themselves when there is extra space in the container, so it only matters when the container wraps (flex-wrap: wrap or wrap-reverse). On a single-line container (flex-wrap: nowrap) it has no effect; we checked this in Chromium 141.
Does the copied CSS match the preview?+
Yes. The preview is styled by the same CSS you copy (scoped to the demo), and the HTML panel gives the matching markup, so pasted into a blank page the items land where they are in the preview. We checked the default layout, all five patterns and twelve random configurations with fixed sizes: every item's position and size matched to the pixel. Where an item sizes to its content (height: auto without stretch, a basis of 0 in a column, baseline alignment), the result depends on what you put inside it, so it can differ from the demo's numbered boxes.
Can I use the layout patterns as a starting point?+
Yes. Centered content, sidebar + main, equal columns, a holy-grail layout (header, two side columns, main, footer, built with wrapping and flex-basis: 100% rows) and wrapping cards each load into the playground, where you can adjust them and copy the CSS and HTML.

📖 Learn More

Related Article CSS Flexbox vs Grid: When to Use Which → Related Article How to Use CSS Flexbox →

Built by Derek Giordano · Part of Ultimate Design Tools

Privacy Policy · Terms of Service

Related Articles

Related Article
How to Use CSS Scroll-Driven Animations (2026) — scroll() and view() Timelines
Related Article
CSS Clip-Path & Shapes: Complete Guide (2026)
Related Article
Glassmorphism vs Neumorphism: CSS Guide (2026)