Gap For Flexbox Is Finally Arriving In Chromium

May 18, 2020

Fairly soon after grid-gap was introduced in CSS Grid the spec officially changed to just gap. It had become obvious that not only was the property extremely useful for grid, it would also be great to have with flexbox. Rather than make a flex-gap, grid-gap would be changed to work with both (not to mention multi-columns, but that’s much less exciting). Unfortunately, although Firefox has had this implemented since 2018 the other browsers have lagged behind; until now. Chromium 85, releasing June 25th, will finally be getting gap in flexbox. That means Chrome, Edge, Opera, Brave, and others will all be getting it, leaving just Safari which hopefully won’t be far behind.

For now, there are still hacks like using wrapping elements, pseudo-classes, or negative margins that will work until gap is fully implemented and users have upgraded their browsers. I’ve never liked doing any of those though so I’m excited that soon I won’t have to.

Blog/Tutorials from Justin Blaisdell, a UI Developer living in Austin Texas. Contact Me!

© 2020 Justin Blaisdell