CSS Flexbox Generator
Set flexbox properties and see the layout change instantly.
● Your files are processed locally in your browser and are not uploaded to our servers.
How it works
The preview container uses exactly the CSS shown below. Items have different sizes so you can see how alignment works. Use wrap with many items to see align-content in action.
FAQ
Flexbox or grid?
Flexbox lays things out in one direction (a row or a column). Grid handles rows and columns together.