CSS Flexbox Playground

Experiment with CSS Flexbox properties and see the results in real time.

flex-direction
justify-content
align-items
flex-wrap
gap: 8px
Child Count: 4
Preview
1
2
3
4
CSS Code
display: flex;
flex-direction: row;
justify-content: flex-start;
align-items: stretch;
flex-wrap: nowrap;
gap: 8px;

How to Use

Use the dropdown menus to change flex-direction, justify-content, align-items, and flex-wrap. Adjust the gap slider and the number of child items. Watch the colored boxes rearrange in the preview area as you change each property. Copy the CSS code when you have the layout you want.

FAQ

Related Tools