From the course: Responsive Layout

Unlock the full course today

Join today to access over 24,000 courses taught by industry experts.

Ordering flex items

Ordering flex items - HTML Tutorial

From the course: Responsive Layout

Start my 1-month free trial Buy for my team

Ordering flex items

“

- [Instructor] Next we'll look at order. The order property changes the order of the flex items within the container. It works exactly the same as order does in grid. Here we're displaying the five boxes in the order they are in the HTML. I'm going to add the order property for item two. I'm on line 13 of the code. Item two, and then order colon three. Save and refresh. And you can see that item two moved all the way to the end. The reason is that flex items by default have an order value of zero. So when it's displaying them in order, one, three, four, and five all have a value of zero, so they come before box two, which has a value of three. So I'm gonna go back to the code and give item three an order of one. Order one. Save and refresh. Now item three is the second to last with a value of one before item two, which has a value of three. You can also give flex items a negative number for the order. That item would come before the items which have an order of zero. Let's go back to…

Contents