sort()

The numbers in order.

In CSS, order: var(--value) lines the items up in a flex row, smallest first, and each item prints its own --value; items with equal values keep their order in the markup. The answer is the order on screen: nothing is read back as a number (median() and rank() read from a sorted row).

Example

Result
Markup
<div class="sort">
  <i style="--value: 0"></i>
  <i style="--value: 2"></i>
  <i style="--value: 3"></i>
  <i style="--value: 1"></i>
</div>
CSS
.sort { display: flex; }
.sort > i { order: var(--value); }
.sort > i::after { counter-reset: v var(--value); content: counter(v); }
/* only spaces the printed numbers */
.sort { gap: 1ch; }

Limits

  • whole-number values: order takes an <integer>, and a fraction such as 2.5 makes the declaration invalid; scale fractions to whole numbers first; the items then print the scaled values
  • values from −2,147,483,648 to 2,147,483,647: past them order saturates, and the values tie and keep their place in the markup
  • largest first: order: calc(-1 * var(--value)), with values from −8,388,608 to 8,388,608 in Firefox 158, which computes a larger calc() in order to a nearby even number, and above −2,147,483,648 in all three

Browser support

ChromeSafariFirefox
Example8414.163

Each row gives the first versions that support every feature its example uses, by MDN’s browser-compat-data. The Example was run in Chrome 155, Safari’s WebKit 26.4 and Firefox 158.