Unlock 30% off on Manual Testing Annual Plans this Holiday Season.

Copied to Clipboard!

Next-Gen App & Browser
Testing Cloud

Trusted by 2 Mn+ QAs & Devs to accelerate their release cycles

Start free with Google Start free with Email

gap property for Flexbox

This allows you to create gaps/gutters between flex items and to control the space between items.

Last updated on : 2023-03-20

Browser Versions

Edge

Firefox

Chrome

Safari

Opera

5.5 - 11

12 - 83

84 - 111

2 - 62

63 - 113

4 - 83

84 - 114

3.2 - 14

14.1 - 16.4

9.5 - 72

73 - 95

Fully Supported

Partially

No Support

Formal Definition

Inherited

Applies to

multi-column elements, flex containers, grid containers

Initial value

row-gap: normal column-gap: normal

Animation type

row-gap: a length, percentage or calc(); column-gap: a length, percentage or calc();

Computed value

row-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements column-gap: as specified, with <length>s made absolute, and normal computing to zero except on multi-column elements

Specifications

CSS Box Alignment Module Level 3 # gap-shorthand

Syntax

/* One <length> value */
 gap: 20px;
 gap: 1em;
 gap: 3vmin;
 gap: 0.5cm;
 /* One <percentage> value */
 gap: 16%;
 gap: 100%;
 /* Two <length> values */
 gap: 20px 10px;
 gap: 1em 0.5em;
 gap: 3vmin 2vmax;
 gap: 0.5cm 2mm;
 /* One or two <percentage> values */
 gap: 16% 100%;
 gap: 21px 82%;
 /* calc() values */
 gap: calc(10% + 20px);
 gap: calc(20px + 10%) calc(10% - 5px);
 /* Global values */
 gap: inherit;
 gap: initial;
 gap: revert;
 gap: unset;

Browser Compatibility

gap property for Flexbox on IE is not supported on any IE versions.

gap property for Flexbox on Edge is fully supported on 84-111, and not supported on 12-83 Edge versions.

gap property for Flexbox on Firefox is fully supported on 63-113, and not supported on 2-62 Firefox versions.

gap property for Flexbox on Chrome is fully supported on 84-114, and not supported on 4-83 Chrome versions.

gap property for Flexbox on Safari is fully supported on 14.1-16.4, and not supported on 3.2-14 Safari versions.

gap property for Flexbox on Opera is fully supported on 73-95, and not supported on 9.5-72 Opera versions.

gap property for Flexbox on Safari on iOS is fully supported on 14.5-16.4, and not supported on 3.2-14 Safari on iOS versions.

gap property for Flexbox on Android Browser is fully supported on 97-111, and not supported on 2.1-4 Android Browser versions.

gap property for Flexbox on Opera Mobile is fully supported on 64-73, and not supported on 10-12 Opera Mobile versions.

gap property for Flexbox on Chrome for Android is fully supported on all Chrome for Android versions.

gap property for Flexbox on Firefox for Android is fully supported on all Firefox for Android versions.

gap property for Flexbox on Samsung Internet is fully supported on 14-20, and not supported on 4-13 Samsung Internet versions.

Browser Support for gap property for Flexbox

gap property for Flexbox on Chrome

gap property for Flexbox on Safari

gap property for Flexbox on Firefox

gap property for Flexbox on Internet Explorer

gap property for Flexbox on Opera

gap property for Flexbox on Edge

References

Data sourced from

High

Overall Browser Compatibility Score

Note:gap property for Flexbox shows a browser compatibility score of 88. This is a collective score out of 100 to represent browser support of a web technology. The higher this score is, the greater is the browser compatibility. The browser compatibility score is not a 100% reflection for every browser and the web technology support. However, it does give you an estimate on how much you should rely on a particular web technology in terms of browser compatibility.

Test on 3000+ browsers for gap property for Flexbox & more

Test your website for gap property for Flexbox and other web technologies. Get 100 FREE automation test minutes!

Test Now