Implement "gap" property (part of the spec for flex layout)

[twop]

What problem does this solve or what need does it fill?

The issue is as old as flex box: spacing between elements

What solution would you like?

Implement the spec: https://developer.mozilla.org/en-US/docs/Web/CSS/gap#specifications
Or at least a reasonable subset, note that calc should be probably outside of the scope

Thus, I think, implementing just explicit values should be good enough (at least as a start)

from spec:

gap: 20px; /* <--- that would be totally enough for me */


/* these are probably way less useful and applicable */
gap: 1em;
gap: 3vmin; 
gap: 0.5cm;
/* One <percentage> value */
gap: 16%;
gap: 100%;

What alternative(s) have you considered?

Work around is simple: margins + negative padding, but super cumbersome

[Weibye]

As far as I can tell, this would require implementing full or partial support for CSS-Grid layout

https://www.w3.org/TR/css-align-3/#gap-shorthand

[alice-i-cecile]

Ah interesting. Well, we can tackle this as part of #28 then :)

[twop]

I would advocate for supporting only "shorthand" version (at least initially), e.g. just "gap".

My understanding that column-gap and row-gap have special case for flex-box layouts. In other words, grid layout is orthogonal to the implementation of "gap" for flex box layout https://drafts.csswg.org/css-align/#gap-flex. Thus it is not immediately related to #28 (again, according to my understanding)

When applied to the main axis (e.g. column-gap in a row flex container), indicates minimum spacing between items (as if an additional fixed-size margin were inserted between adjacent flex items in a single line).
When applied to the cross axis (e.g. row-gap in a row flex container), indicates minimum spacing between adjacent flex lines.

[nicoburns]

PR implementing it in yoga here: facebook/yoga#1116. They also have generated tests for it.