CSS Gaps 1 proposes that rule style, width and color properties accept multiple values, and that these properties also apply to flex containers. For flexbox, this raises the question of how multiple values should be assigned to gaps in the cross direction (i.e. gap between items).
One option is linear assignment. Here, each gap consumes one value in order. For example, given:
column-rule-color: red, blue, green, yellow;
The first gap would use red, the second blue, the third green and so on, cycling as needed.
This model is simple, intuitive, and predictable.
Another option is a per line reset. With this approach, the list of values will be reapplied for each flex line. It sort of comes in handy for cases where gaps may be aligned across different flex lines, and authors might want the same value applied consistently across lines. So rather than having:
We have:
Essentially, the core question here is: should decoration values apply to global cross‑axis gaps, or to per‑line (local) cross‑axis gaps?
My view is that the linear assignment model is more intuitive and straightforward for authors. Flexbox is fundamentally a 1D layout model, and assigning values globally across gaps better reflects that mental model. Resetting values per line risks introducing implicit 2D alignment that flexbox does not guarantee.
CSS Gaps 1 proposes that rule style, width and color properties accept multiple values, and that these properties also apply to flex containers. For flexbox, this raises the question of how multiple values should be assigned to gaps in the cross direction (i.e. gap between items).
One option is linear assignment. Here, each gap consumes one value in order. For example, given:
The first gap would use red, the second blue, the third green and so on, cycling as needed.
This model is simple, intuitive, and predictable.
Another option is a per line reset. With this approach, the list of values will be reapplied for each flex line. It sort of comes in handy for cases where gaps may be aligned across different flex lines, and authors might want the same value applied consistently across lines. So rather than having:
We have:
Essentially, the core question here is: should decoration values apply to global cross‑axis gaps, or to per‑line (local) cross‑axis gaps?
My view is that the linear assignment model is more intuitive and straightforward for authors. Flexbox is fundamentally a 1D layout model, and assigning values globally across gaps better reflects that mental model. Resetting values per line risks introducing implicit 2D alignment that flexbox does not guarantee.