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

• https://jsbin.com/jibudiyene/edit?html,css,output

Documentation

• https://developer.mozilla.org/en-US/docs/Web/CSS/row-gap

Specification

Specification link

Status: Specification currently under development in a Working Group

Status in Chromium

Blink components: Blink>Layout>Flexbox

Implementation status: Enabled by default (tracking bug)

Consensus & Standardization

• Firefox: Shipped/Shipping
• Safari: No signal
• Web Developers: Positive

Owner

• dgrogan@chromium.org

Intent to Prototype url

Search tags

Last updated on 2021-12-13