Grid And Flexbox

Order

Style syntax for changing the order of item in flex or grid container.

🚧This page is still under construction and some content may not be complete.

Overview [sr-only]

ClassDeclarations
order:value / o:valueorder: value
o:firstorder: -999999
o:lastorder: 999999
1
2
order:first
4
5
<div class="flex">
<div class="o:-3"></div>
<div class="o:-1"></div>
<div class="order:first"></div>
<div class="o:1"></div>
<div class="o:3"></div>
</div>

Basic usage

Ordering flex or grid items

Use order:value to order items of flex or grid container. Value is an integer that can be positive, negative or zero.

2
4
1
3
5
<div class="flex gap:10">
<div class="o:-3">2</div>
<div class="o:1">4</div>
<div class="o:first">1</div>
<div class="o:0">3</div>
<div class="o:3">5</div>
</div>

Conditionally apply

Apply styles in different states using selectors, media queries, etc.

<div class="order:1:hover order:1@sm order:1@dark order:1@print"></div>
PREVIOUS
Justify Self

Style syntax for controlling how an individual item is aligned along its inline axis.

NEXT
Place Content

Style syntax for setting align-content and justify-content at the same time.

MIT License © Aoyue Design LLC.