Safari 14.1 Adds Support for Flexbox Gaps

Flexbox Gets the Gap Property in Safari 14.1

The latest Safari update quietly adds support for the gap property in flexbox layouts. While gap (previously known as grid-gap) has been available for CSS Grid for some time, its use was limited to grid contexts. Now the same spacing shorthand works across both layout systems:

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

A Quiet Release

Apple has not highlighted the change in its release notes. The update came to light after Jen Simmons tweeted about it, and Eric Meyer passed the news along. Checking the WebKit CSS Feature Status confirms the property is listed as supported, but it is absent from the Safari release notes archive so far. For now, Maximiliano Firtman‘s overview of iOS 14.5 offers the most detailed breakdown of what changed.

The timing is convenient, given recent coverage on applying gap not only to grid and flexbox but also to multi-column layouts.