gap property for Flexbox

Overview

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

Formal Definition

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;

Code snippets

index.html

Source:index.html

Browser Compatibility