Technology News

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 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.

Web Languages as Compile Targets
Early bird extension gives you more time to save on passes to TC Early Stage 2021: Marketing and Fundraising

Related Articles

CSS Grid Can Do Auto Height Transitions

css-grid-can-do-auto-height-transitions
Bonafide CSS trick alert! Nelson Menezes figured out a new way (that only works in Firefox for now) that is awfully clever. Perhaps you know that CSS cannot animate to…

Interesting New Newsletter Design Trends

interesting-new-newsletter-design-trends
Newsletters have long been a necessary aspect of marketing. While in the early years, designs were basic and uninspiring, we are now seeing some extraordinary examples of companies and individuals…

Web Streams Everywhere (and Fetch for Node.js)

web-streams-everywhere-and-fetch-for-node
Chrome developer advocate Jake Archibald called 2016 “the year of web streams.” Clearly, his prediction was somewhat premature. The Streams Standard was announced back in 2014. It’s taken a while,…

Amazon ElastiCache: An Introduction, and Alternatives

Amazon ElastiCache: An Introduction, and Alternatives
Learn how to get started with Amazon’s ElastiCache, a powerful tool for improving the performance and scalability of your applications. Continue reading Amazon ElastiCache: An Introduction, and Alternatives on SitePoint.…