Space and Distribute Items Perfectly
Don't guess with padding and margins. Let Flexbox calculate the math for perfectly distributed items across your layout.
When to use this solution:
Use this when you have a list of cards, icons, or buttons that need to fill a row with consistent spacing.
Common Use Cases
1Step-by-Step Guide
Identify your row
Ensure your items are children of a flex container.
Choose distribution type
Choose 'space-between' for edge-to-edge spacing or 'space-around' for even padding on both sides.
Control the gap
Alternatively, use the 'gap' property to define an exact distance between each item.
Export the CSS
Copy the generated code and paste it into your project to see the result.
Ready to get started?
Use our free tool to solve this problem in seconds. No installation required.
Generate Spacing CSSFrequently Asked Questions
What is the difference between space-between and space-around?
'space-between' pushes the first and last items to the edges, while 'space-around' gives equal space around every item.
Can I use 'gap' with Flexbox?
Yes, modern browsers support the 'gap' property for flex containers, which is even easier than using margins on items.