Home/ Free Tools/ Flexbox Playground

Flexbox Playground

Visually build flexbox layouts. Adjust container and item properties with instant live preview and clean CSS output.

Container
flex-direction
flex-wrap
justify-content
align-items
align-content
gap
10px
Items (4)
Click an item to edit its individual properties
Item 1
flex-grow
0
flex-shrink
1
flex-basis
order
0
align-self
width
80px
height
80px

Live Preview

Generated CSS

More Free Tools

馃帹

Tailwind CSS Converter

Convert vanilla CSS to Tailwind utility classes instantly.
馃摑

Markdown to HTML

Convert Markdown to clean HTML with GFM support and live preview.
馃敆

API Request Builder

Build and test HTTP requests visually with auth and response viewer.
馃幆

Color Palette Generator

Generate beautiful color palettes with harmony rules and export.

Related Tools

CSS Box Shadow Generator 路 Emoji Picker & Search 路 Meta Tag Generator 路 Favicon Generator 路 Free Base64 Encoder/Decoder

Related Tools

Free CSS to Tailwind Converter 路 Free Icon Generator 路 Free Accessibility Checker

Related Tools

Free Color Palette Generator 路 Free JSON to YAML Converter 路 Free HTML to Markdown Converter

Related Tools

Free JSON to YAML Converter 路 YAML to JSON Converter 路 Free Markdown Editor