CSS Tool
Flexbox Generator
Visual CSS flexbox playground with live preview. Configure container and item properties, apply common layout presets, and export clean CSS code.
Live Preview
1
2
3
Generated CSS
.fx-container {
display: flex;
gap: 10px;
}
Container Properties
10px
Items (3/12)
Item 1 grow:0 shrink:1 basis:auto
Item 2 grow:0 shrink:1 basis:auto
Item 3 grow:0 shrink:1 basis:auto
Item 3 Properties
0
1
0
Layout Presets