This css property allows you to specify spacing between flex items and/or flex lines.

Motivation

Developers can get close to this functionality with the margin and padding properties but there are limitations. Cribbing from https://gist.github.com/OliverJAsh/7f29d0fa1d35216ec681d2949c3fe8b7 : margin collapsing would break gutters when nesting gutter containers, e.g. https://jsfiddle.net/OliverJAsh2/Lwxyt07p/6/ any width specified on the gutter item would not be inclusive of the gutter, e.g. https://jsfiddle.net/OliverJAsh2/p8e50c6m/1/

Demo

Documentation

Specification

Working draft or equivalent

Status in Chromium

Blink>Layout>Flexbox


Enabled by default (tracking bug) in:

  • Chrome for desktop release 84
  • Chrome for Android release 84
  • Android WebView release 84

Consensus & Standardization

After a feature ships in Chrome, the values listed here are not guaranteed to be up to date.

Owner

Intent to Prototype url

Intent to Prototype thread

Search tags

flex, flexbox, gaps, gutters,

Last updated on 2020-12-02