CSS flexbox playground
Explore alignment, wrapping and spacing visually.
Како користити CSS flexbox playground
CSS flexbox playground previews a flex container with 1 to 30 numbered items and writes the matching CSS. Set flex-direction (row, column or their reverses), justify-content including space-between and space-evenly, align-items, wrap or nowrap, and a gap from 0 to 100 px, then copy the six declarations once the preview looks right.
- Enter the requested values in the settings panel.
- Adjust the basic settings, then open Advanced mode for export and fine-tuning options. Custom settings stay active when the panel is closed.
- Run css flexbox playground, review the output, then use the available copy or download controls.
Могућности алата
Explore alignment, wrapping and spacing visually.
- Direction
- row · column · row-reverse · column-reverse
- Justify content
- flex-start · center · flex-end · space-between · space-around · space-evenly
- Align items
- stretch · flex-start · center · flex-end
- Wrap
- wrap · nowrap
- Gap (px)
- Range: 0 to 100
- Items
- Range: 1 to 30
Ограничења и обрада
Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.
Честа питања
What is the difference between space-between, space-around and space-evenly?
space-between puts the first and last items at the edges with equal gaps between items. space-around gives each item equal space on both sides, so edge gaps are half the inner ones. space-evenly makes every gap, including the edges, the same. Try each in the preview.
Why does align-items seem to do nothing in the flexbox preview?
align-items works on the cross axis. With direction row, it moves items vertically inside the 220 px tall preview, and stretch makes them fill that height. With column, it acts horizontally, so switch direction to see the change.
Does the flexbox playground set flex properties on the items?
No. The output covers only the container: display, flex-direction, justify-content, align-items, flex-wrap and gap. Item properties like flex-grow or order are not generated, so add them separately if individual items need to size differently.
Where is my input processed?
This operation processes its source in your browser. Copy and download are explicit actions; source input is not saved in an account or history.
What are the input limits?
Images use the existing 32-megapixel canvas bound. Up to 100 source images are allowed where supported. Pasted HTML is bounded to 200,000 characters; Mermaid diagrams to 20,000 characters and 300 lines. SVG and PNG generation require a browser.