Flexbox Calculator
Calculate precise flexbox item widths, gaps, and container sizes, then generate simple CSS flex layout code.
Flexbox Calculator
This calculator auto-updates when values change.
Item width
384px
Total gap width
48px
CSS
.flex-container { display: flex; gap: 24px; } .flex-item { flex: 0 0 384px; }
About This Flexbox Calculator
This flexbox calculator helps plan evenly spaced flex layouts by calculating item width, container width, and total gap space.
Use it to check card grids, responsive rows, and repeated layout blocks before writing or adjusting CSS.
How to Use This Tool
- 1
Choose a layout mode
Calculate item width from a container, calculate container width from item size, or generate CSS.
- 2
Enter item and gap values
Add the number of items and the gap between them.
- 3
Review dimensions
Use the item width, total gap width, and generated CSS in your layout.
Frequently Asked Questions
How is item width calculated?v
The calculator subtracts total gap width from the container width, then divides the remaining space by the item count.
Can browser rendering differ?v
Yes. Sub-pixel rounding, padding, and box sizing can cause small visual differences.
Does this replace testing?v
No. It gives the layout math, but you should still test the final CSS in your target browsers.