Flexbox is a CSS layout model designed for distributing space among items in a container, even when item sizes are unknown. It works along one axis at a time (row or column) and handles alignment, spacing, and ordering without floats or positioning hacks. Every modern browser supports it fully.

What is the difference between Flexbox and CSS Grid?

Flexbox is one-dimensional: it arranges items along a single row or column. Grid is two-dimensional: it controls both rows and columns at the same time. Use Flexbox for component-level layouts (navbars, card rows, form groups). Use Grid for page-level layouts (full page grids, dashboard layouts). They work well together. A Grid cell can contain a Flex container.

What does `flex: 1` mean?

flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. It tells the item to take up an equal share of available space relative to other items with the same value. Two sibling items both set to flex: 1 will each occupy 50% of the container width (minus gap). Three items at flex: 1 each get roughly 33%.

How does `gap` differ from margins on flex items?

gap sets consistent spacing between items without adding margin to the first or last item. With margins, you have to manually remove the margin from the edge items or use negative margins on the container. gap handles this automatically and works with wrapping. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

Why do my flex items not shrink below their content width?

By default, min-width on flex items is set to auto, which prevents items from shrinking smaller than their content. To allow shrinking, add min-width: 0 to the item. For text, also add overflow: hidden or text-overflow: ellipsis to prevent text from pushing the item wider.

Can I nest Flexbox containers?

Yes. A flex item can itself be a flex container. This is common: a horizontal navigation bar (outer flex row) where each nav group is a vertical flex column (inner flex column). The playground lets you add nested containers to test this.

Flexbox Playground

This tool lets you build CSS Flexbox layouts by toggling properties in a visual interface and seeing the result in real time. Set the container direction, wrapping behavior, alignment, gap, and per-item flex values, then copy the generated CSS directly into your project. Everything runs in your browser. No data is sent anywhere.

How this tool works

The tool renders a live Flexbox container in the browser using standard CSS. When you change a property through the controls, the tool applies that CSS property to the container element immediately and updates the visual preview. There is no compilation step and no framework dependency. The layout you see is the layout your browser renders using the same engine it uses on production pages. The control panel exposes every standard Flexbox property:

Worked example

A navbar with space-between puts the logo on the left and links on the right. Set justify-content to space-between on a row flex container with three items to see the effect.

Frequently asked questions

What is CSS Flexbox?
Flexbox is a CSS layout model designed for distributing space among items in a container, even when item sizes are unknown. It works along one axis at a time (row or column) and handles alignment, spacing, and ordering without floats or positioning hacks. Every modern browser supports it fully.
What is the difference between Flexbox and CSS Grid?
Flexbox is one-dimensional: it arranges items along a single row or column. Grid is two-dimensional: it controls both rows and columns at the same time. Use Flexbox for component-level layouts (navbars, card rows, form groups). Use Grid for page-level layouts (full page grids, dashboard layouts). They work well together. A Grid cell can contain a Flex container.
What does `flex: 1` mean?
flex: 1 is shorthand for flex-grow: 1, flex-shrink: 1, flex-basis: 0%. It tells the item to take up an equal share of available space relative to other items with the same value. Two sibling items both set to flex: 1 will each occupy 50% of the container width (minus gap). Three items at flex: 1 each get roughly 33%.
How does `gap` differ from margins on flex items?
gap sets consistent spacing between items without adding margin to the first or last item. With margins, you have to manually remove the margin from the edge items or use negative margins on the container. gap handles this automatically and works with wrapping. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.
Why do my flex items not shrink below their content width?
By default, min-width on flex items is set to auto, which prevents items from shrinking smaller than their content. To allow shrinking, add min-width: 0 to the item. For text, also add overflow: hidden or text-overflow: ellipsis to prevent text from pushing the item wider.
Can I nest Flexbox containers?
Yes. A flex item can itself be a flex container. This is common: a horizontal navigation bar (outer flex row) where each nav group is a vertical flex column (inner flex column). The playground lets you add nested containers to test this.