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
Properties for the flex container
Properties for the flex item
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.