Container
Items
EDIT ITEM
Live preview
Generated CSS
Frequently asked questions
How do I edit a single flex item?
Use the Selected dropdown in the Items panel to pick an item, then adjust its flex-grow, shrink, basis, order or align-self. The preview highlights the active item.
Does the generated CSS include item classes?
Yes. The container rule is always included, and any item with non-default settings gets its own .flex-item-N class with just the changed properties.
What does the gap slider do?
It sets the gap property, the modern way to space flex items evenly without margin hacks on each child.
Preview
Related free tools
Free CSS Button Generator | Style Buttons Online
Free CSS button generator. Customize colors, padding, and radius with live preview, then c
Free HEX RGB HSL Color Converter
Free color converter. Convert between HEX, RGB and HSL instantly, preview the color and co
Free Color Contrast Checker | WCAG Accessibility Tool
Free color contrast checker. Test text and background colors against WCAG AA and AAA stand