Order

Utilities for controlling the visual order of flex and grid items, independent of their DOM order.

Reorder items

Use order-<number> to change the visual position of an item without altering DOM order. Items render ascending by order value (default 0); ties fall back to source order. Generative numeric values are unbounded — order-13, order-99, etc. all work. The keyword shortcuts order-first and order-last snap an item to the very front or back regardless of any explicit numeric values on its siblings.

Style('flex justify-between ...', children: [
  Style('order-3 ...', child: Text('01')),
  Style('order-1 ...', child: Text('02')),
  Style('order-2 ...', child: Text('03')),
])

Use negative values

Use the dash-prefix form -order-<number> to assign a negative order, pulling an item ahead of any default-0 siblings. The arbitrary form order-[<value>] accepts signed integers, so order-[-2] is equivalent to -order-2. -order-0 is invalid — use order-none or order-0 for the zero case.

Style('flex justify-between ...', children: [
  Style('order-last ...', child: Text('01')),
  Style('...', child: Text('02')),
  Style('order-first ...', child: Text('03')),
])

Class reference

Class	Description
order-first	Snap to the very front (order: -9999).
order-last	Snap to the very back (order: 9999).
order-none	Reset item order to the default (order: 0).
order-<number>	Generative non-negative integer, unbounded (e.g. order-3, order-13, order-99).
-order-<number>	Negative dash-prefix form for any positive integer (e.g. -order-1, -order-3). -order-0 is invalid.
order-[<value>]	Arbitrary signed integer (e.g. order-[7], order-[-2]).

The CSS-variable form order-(--custom-property) is resolved against theme-defined StyleThemeData.customProperties — it behaves like order-[<value>] when the theme defines the property. Cascade-inherited or JS-set CSS variables remain out of scope.