Free Online Flexbox Gap Polyfill CSS Generator

Instantly generate the negative-margin hack for Flexbox gap support in legacy browsers. Compatible with all modern frameworks and pure CSS architectures.

Configuration

Allow Wrapping

.
.

Generated CSS Polyfill


                        

Visual Preview

1
2
3
4
5

How it works: The container uses a negative margin equal to half the gap size, while children use a positive margin of the same amount. An outer wrapper with overflow: hidden is recommended to prevent horizontal scrollbars caused by the negative margins.

CSS copied to clipboard!