Theory
Theory
Comments

The order property, the sequence number of the flex item

Another property that we will look at in this chapter is order, which sets the sequence number of the flex item.

The sequence number is an integer, which can be either positive or negative. For example:

.flex-element {
  order: -1; /* This item is displayed first in the container */
}

By default, the sequence number of the flex items is equal to 0, and the items are sorted in ascending order starting from this value.

This is a very useful property, since it can be used to change the order of flex items in the stream without changing the HTML code.

Let’s try to rearrange the rugs with the cats using the order property.

index.html
style.css

HTML

<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>The sequence number of the flex item, order</title> <link href="course.css" rel="stylesheet"> <link href="style.css" rel="stylesheet"> </head> <body class="house"> <div class="room"> <div class="rug rudolf"> <span>Rudolf</span> </div> <div class="rug marty"> <span>Marty</span> </div> <div class="rug simba"> <span>Simba</span> </div> <div class="rug muffin"> <span>Muffin</span> </div> </div> </body> </html>

CSS

.room { display: flex; align-items: center; }

Goalscompleted

Assign the sequence number -1 for Muffin’s rug (.muffin),
then assign the sequence number -2 for Simeon’s rug (.simba),
and finally assign the number 1 for Rudolf’s rug (.rudolf).

The order property, the sequence number of the flex item

Comments

Log in

Sign up

Restore access