Safari 14.1 Adds Support for Flexbox Gaps

Yay, it’s here! Safari 14.1 reportedly adds support for the gap property in flexbox layouts. We’ve had grid-gap support for some time, but true to its name, it’s limited to grid layouts. Now we can use gap in either type …


The post Safari 14.1 Adds Support for Flexbox Gaps appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.

Yay, it’s here! Safari 14.1 reportedly adds support for the gap property in flexbox layouts. We’ve had grid-gap support for some time, but true to its name, it’s limited to grid layouts. Now we can use gap in either type of layout:

.container {
  display: flex;
  flex-flow: row wrap;
  gap: 1.5rem;
}

Apple’s been rather quiet about the update. I didn’t even hear about it until Eric Meyer brought it up in an email, and he only heard about it when Jen Simmons tweeted it out.

I checked the WebKit CSS Feature Status and, sure enough, it’s supported. It just wasn’t called out in the release notes. Nothing is posted to Safari’s release notes archive just yet, so maybe we’ll hear about it officially there at some point. For now, it seems that Maximiliano Firtman‘s overview of iOS 14.5 is the deepest look at what’s new.

And how timely is it that Eric recently covered how to use the gap property, not only in grid and flexbox layouts, but multi-column as well.


The post Safari 14.1 Adds Support for Flexbox Gaps appeared first on CSS-Tricks.

You can support CSS-Tricks by being an MVP Supporter.


Print Share Comment Cite Upload Translate
APA
Geoff Graham | Sciencx (2024-03-28T10:47:44+00:00) » Safari 14.1 Adds Support for Flexbox Gaps. Retrieved from https://www.scien.cx/2021/04/30/safari-14-1-adds-support-for-flexbox-gaps/.
MLA
" » Safari 14.1 Adds Support for Flexbox Gaps." Geoff Graham | Sciencx - Friday April 30, 2021, https://www.scien.cx/2021/04/30/safari-14-1-adds-support-for-flexbox-gaps/
HARVARD
Geoff Graham | Sciencx Friday April 30, 2021 » Safari 14.1 Adds Support for Flexbox Gaps., viewed 2024-03-28T10:47:44+00:00,<https://www.scien.cx/2021/04/30/safari-14-1-adds-support-for-flexbox-gaps/>
VANCOUVER
Geoff Graham | Sciencx - » Safari 14.1 Adds Support for Flexbox Gaps. [Internet]. [Accessed 2024-03-28T10:47:44+00:00]. Available from: https://www.scien.cx/2021/04/30/safari-14-1-adds-support-for-flexbox-gaps/
CHICAGO
" » Safari 14.1 Adds Support for Flexbox Gaps." Geoff Graham | Sciencx - Accessed 2024-03-28T10:47:44+00:00. https://www.scien.cx/2021/04/30/safari-14-1-adds-support-for-flexbox-gaps/
IEEE
" » Safari 14.1 Adds Support for Flexbox Gaps." Geoff Graham | Sciencx [Online]. Available: https://www.scien.cx/2021/04/30/safari-14-1-adds-support-for-flexbox-gaps/. [Accessed: 2024-03-28T10:47:44+00:00]
rf:citation
» Safari 14.1 Adds Support for Flexbox Gaps | Geoff Graham | Sciencx | https://www.scien.cx/2021/04/30/safari-14-1-adds-support-for-flexbox-gaps/ | 2024-03-28T10:47:44+00:00
https://github.com/addpipe/simple-recorderjs-demo