Flexbox Playground
Experiment with flex layouts live.
Presets
Container
Direction
Wrap
Alignment
justify-content
align-items
align-content
align-content only applies when items wrap.
Selected item
Click an item in the preview to edit it.
Preview size
flex-basis
align-self
Keyboard shortcuts
- RandomizeR
- Add item+
- Remove item-
- Open the command palette⌘K
- Search tools/
Information
- Category
- CSS
- Runs
- In your browser
- Network requests
- None
Processed locally in your browser.No requests are made with your input.