Skip to content

Flexbox Playground

An interactive playground to experiment with and visualize flexbox properties in real-time. Adjust container and item properties to see how flexbox layout behaves.

Playground

General Settings

dir

Properties for the flex container

flex-direction
flex-wrap
justify-content
align-items
align-content

Properties for the flex item

align-self
  1. 0
  2. 1
  3. 2
  4. 3
  5. 4

How to Use

Container Properties (Left Panel)

  • Flex Direction: Control the main axis direction (row, column, row-reverse, column-reverse)
  • Flex Wrap: Enable wrapping of items to multiple lines
  • Justify Content: Align items along the main axis
  • Align Items: Align items along the cross axis
  • Align Content: Align wrapped lines along the cross axis
  • Writing Direction: Switch between left-to-right and right-to-left layouts

Item Properties (Select Items)

  • Flex Grow: How much an item grows to fill available space
  • Flex Shrink: How much an item shrinks when space is limited
  • Flex Basis: The initial size of an item before space is distributed
  • Order: Visual reordering of items
  • Align Self: Override the container’s align-items for individual items

Learn More

For a comprehensive guide to flexbox concepts and techniques, explore our interactive flexbox guide.

Resources