native plugin to support gap property for Flexbox

[cysabi]

What would you want to propose?

I'd really like a plugin to support the gap property for flexbox. It's the 4th most searched feature on https://caniuse.com

I am aware of the existing plugin that uses margins but there are some serious limitations with the plugin that make it unusable.

Suggested solution

There are many different ways gap could be implement without using margins, such as creating separator elements in between each flexbox item with the height and width of the row and column gap properties respectively.

<div style="height: {row-gap}; width: {column-gap}">

But this does have some edge cases that might not work as intended when the flexbox wraps.

Additional context

No response

Validations

• [X] Follow our Code of Conduct
• [X] Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

Would you like to open a PR for this feature?

• [ ] I'm willing to open a PR

[romainmenke]

Thank you @LeptoFlare for reaching out,

Unfortunately gap is one of those features that has no native alternative in older browsers.

Even inserting extra elements and dynamically sizing these with javascript has serious issues.

One of which is that nth-child and similar selectors would not match the same elements.

---

Because @supports (gap: 1px) {} also doesn't work as expected for flex elements you can not write fallbacks.

For me personally gap is unusable and will remain this way for the next ±5 years :/

[romainmenke]

Technically not possible to fix this in a general way.