Design

Flexbox Playground

Interactive CSS Flexbox playground. Experiment with flex-direction, justify-content, align-items, wrap, gap, and more.

About This Tool

The Flexbox Playground is an interactive tool for learning and experimenting with CSS Flexbox layout. Change container properties and see items rearrange in real-time.

How to Use

  1. Select flex-direction, justify-content, align-items, and other properties
  2. Add or remove flex items
  3. Observe the layout change live
  4. Copy the generated CSS