Flexbox Playground
Interactive guide to CSS Flexbox properties.
1
2
3
4
How does this tool work?
Learn and test CSS Flexbox layouts interactively with direct visual feedback.
Change the properties of the flex container (such as 'justify-content' or 'align-items') via the control bar. You will immediately see how the arrangement of the boxes in the playground changes. The generated CSS code is displayed live and can be used for your own web projects.
Where are my data processed?
Only in your browser. Your data is not sent to any server.
The tool calculates and converts with JavaScript right on your device. Input and files are not sent to us or anyone else. You can check this yourself: load the page, disconnect from the internet, and the tool keeps working in the open tab.
No Server UploadNo sign-upRuns Offline in Tab