OnSumoTools

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 does the Flexbox Playground work step by step?

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:

What does a typical Flexbox Playground result look like?

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.

Related tools

Learn flexbox by pushing things around

Flexbox is easy to misread from a spec and easy to grasp once you drag a slider. This playground gives you a live canvas. Set the container: direction, wrap, justify, align and gap. Then set each item: grow, shrink, basis, order and self alignment. Property tips show beside the preview.

When the layout looks right, copy the CSS.

The two axes

Everything in flexbox depends on the main axis and the cross axis. justify-content works along the main axis. align-items works across it. Change flex-direction to column and they swap roles. That swap trips up almost everyone at first.

What flex: 1 means

It's shorthand for flex: 1 1 0. Grow by one share, shrink by one share, start from zero width. Items with flex: 1 share space equally, no matter their content.

Items won't shrink below their content by default. Add min-width: 0 to let long text or images shrink.

Gap beats margins

gap adds space between items only, not at the outer edges. With margins you end up fighting the first and last item. Gap is cleaner and works in flexbox now in all current browsers.

Flexbox or Grid

Use flexbox for one-dimensional layouts: a navbar, a button row, a card footer. Use grid for rows and columns together. Nest them freely. Flex containers can sit inside flex containers without trouble.

Everything you try stays in your browser.

Main axis and cross axis

Flexbox confuses people until they learn one idea. There's a main axis and a cross axis. With flex-direction row, the main axis runs left to right, so justify-content spreads items horizontally and align-items works vertically. Switch to column and the axes swap.

Once you know which way each axis points, the properties stop feeling random. Justify lines items up along the main axis. Align-items does the same along the cross axis. Gap adds space between items without margin tricks.

Use the playground to flip direction and watch the property tips update.

Grow, shrink and basis

Flex-grow says how much of the leftover space an item takes. Flex-shrink says how much it gives up when space is short. Flex-basis is the starting size. A common shorthand, flex: 1, means grow equally and start from zero.

Cards in a row, a sidebar next to content, a toolbar with one item pushed right using auto margin: all of these are a few lines of flexbox.

Remember min-width. A flex item won't shrink below its content by default, which is why long words or images sometimes break layouts.

  • Use gap instead of margins between items
  • Wrap when items shouldn't squeeze too small
  • Set min-width: 0 on text items that need to shrink
  • Reach for Grid when you need rows and columns