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]
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>