HTML and CSS Reference
In-Depth Information
CUSTOMIZING DISPLAY ORDER OF CHILD ELEMENTS
Another rather killer feature of Flexbox is that it gives you the ability to change the
ordering of your child elements. This is done using the
order
property. For example,
going back to the our-friends-flexbox.html example, if you want to grab the first
<article>
(“Fun facts!”) and display it last, you could do this:
article:nth-of-type(2) {
: ;
}
This initially looks illogical. Surely this code should cause it to appear first, not
last. With
flex-order
, you put your child elements inside
ordinal groups
: The
elements from each ordinal group appear from lowest ordinal group number to
highest ordinal group number, starting from 0. If multiple elements appear in the
same ordinal group, they will then be ordered inside the group according to their
position in the original source order.
