Markasoftware Markasoftware - 2 months ago 7
CSS Question

Are elements with an identical "order" value valid?

I am using the CSS

order
property to reorder elements in a flexbox container.

There are some elements I would like to put at the end of this list, so I am using
order: 1000
, which is higher than the order of anything else by far.

I do not care about the order of these "end" elements relative to each other, but I'm not sure if having a whole bunch of elements with
order: 1000
is valid.

I can't find anything about it in the spec. Is this valid/legal?

Answer

There is never a situation in CSS in which multiple elements sharing the same value for a property are considered "invalid". CSS does not define validity in this way. As justinw mentions in the comments, since every element has at least the initial value for every CSS property unless otherwise specified by browser defaults or you, CSS needs to account for this scenario for every single property.

In the case of the order property, two flex items with the same value are laid out according to source order, as stated in section 5.4 of the spec. That is to say, between two flex items with order: 1000 (or two flex items with order: 1, or even the initial value 0 for that matter), the one that comes first in the source markup (assuming the DOM tree hasn't been manipulated after the fact) will be laid out before the one that comes last, according to the direction specified by flex-direction.

Here's the exact quote:

Items with the same ordinal group are laid out in the order they appear in the source document. This also affects the painting order [CSS21], exactly as if the flex items were reordered in the source document.

This is similar to how two elements with the same computed value for z-index are painted back-to-front in source order (see section 9.9 of CSS2.1).