Why the "gap" property working on flexbox and is it right to use it?

Issue

I was trying to make some gap between my content like "price:" "20$" I wanted to make a gap between 20$ and price , but I was using flexbox , suddenly I tried "gap" property which is for grid and it worked !

why ? and am I did right thing with doing it?

Solution

Yes, it’s perfectly fine to use gap with flexbox. (May not work with ie11 though)
Works with display: flex, display: grid and column-count: elements.

Reference:
https://developer.mozilla.org/en-US/docs/Web/CSS/gap
https://drafts.csswg.org/css-align-3/#propdef-gap

Applies to: multi-column containers, flex containers, grid containers

Answered By – LSE

Answer Checked By – Willingham (AngularFixing Volunteer)

Leave a Reply

Your email address will not be published.