How to use CSS Flexbox Playground
- Choose a direction and wrapping behavior.
- Set alignment, gap and the shared item basis, grow and shrink values.
- Inspect the sample and copy the container and item rules.
Example: CSS Flexbox Playground
Create a wrapping row with a gap.
You add
Direction: row. Wrap: wrap. Gap: 16 px.
You get
The container rule includes display: flex, flex-direction: row, flex-wrap: wrap and gap: 16px.
Supported inputs and limits
Three to twelve sample items with one shared sizing rule and bounded numeric settings. It does not generate arbitrary per-item rules or your site’s breakpoints. Intrinsic text sizes and the available container space affect wrapping.
Where your input is processed
This tool processes your input in this browser. Your text and files are not uploaded to UseFreeTools. Check this tool's limits for anything it may save on your device.
Choose alignment for the current axis
The main axis follows flex-direction. Justify-content works along it; align-items works across it. Switching from row to column changes which screen direction those properties control.
Questions about CSS Flexbox Playground
Why do items wrap earlier on my page?
Their content, padding, border and minimum sizes can differ from the sample. The container width also determines the room available.
What does flex-basis set?
It supplies an item’s starting main-axis size before free space is distributed or the items shrink.
Does reverse direction change reading order?
It changes visual order. Keep a logical source order for keyboard and assistive-technology users.