[csswg-drafts] [css-gaps-1]: Assigning multiple decoration values to flex containers (#13663)

oSamDavis has just created a new issue for https://github.com/w3c/csswg-drafts:

== [css-gaps-1]:  Assigning multiple decoration values to flex containers ==
[CSS Gaps 1](https://www.w3.org/TR/css-gaps-1/) proposes that rule style, width and color properties accept [multiple values](https://www.w3.org/TR/css-gaps-1/#typedef-line-color-or-repeat), 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:
```css
column-rule-color: red, blue, green, yellow;
```
The first gap would use red, the second green, the third blue and so on, cycling as needed.
This model is simple, intuitive, and predictable.

<img width="351" height="128" alt="Image" src="https://github.com/user-attachments/assets/5df3912b-514e-4e63-b962-3c7306a834f3" />

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:
<img width="349" height="122" alt="Image" src="https://github.com/user-attachments/assets/4c986739-00ac-41b7-87b7-dbe38ba2a34e" />

We have:
<img width="347" height="120" alt="Image" src="https://github.com/user-attachments/assets/01d2279a-d593-467d-a144-26bd51730b07" />

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.


Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/13663 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Monday, 16 March 2026 17:26:39 UTC