From the course: Responsive Layout
Unlock the full course today
Join today to access over 23,400 courses taught by industry experts.
Ordering flex items - HTML Tutorial
From the course: Responsive Layout
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…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
-
-
-
Defining a flexbox container1m 53s
-
(Locked)
Direction3m 36s
-
(Locked)
Wrapping2m 30s
-
(Locked)
Ordering flex items1m 28s
-
(Locked)
Flexbox alignment overview1m 39s
-
(Locked)
Aligning items on main axis3m 16s
-
(Locked)
Aligning items on cross axis3m 35s
-
(Locked)
Aligning lines on cross axis3m 15s
-
(Locked)
Aligning individual flex items1m 38s
-
(Locked)
Distributing space to flex items4m 43s
-
(Locked)
Challenge: Floats to flexbox1m 21s
-
(Locked)
Solution: Floats to flexbox8m 17s
-
-
-