Ordering Flex Items

Daryl Duckmanton
A free video tutorial from Daryl Duckmanton
Full Stack Software Developer
4.6 instructor rating • 3 courses • 45,176 students

Lecture description

In this video I talk about how we can change the ordering of items inside of a container, without changing their position within the HTML. We do this using the order property.

Learn more from the full course

CSS Flexbox in Depth 2021

Don't just learn CSS Flexbox. Gain experience in it. Take your HTML and CSS to a new level.

06:00:47 of on-demand video • Updated March 2020

  • All the CSS properties that are used for Flexbox
  • How to build some common layouts using Flexbox
  • How to build some advanced layouts using Flexbox
  • Gain experience in designing a chat application using Flexbox
English [Auto] How everyone in this video we're going to look at. Ordering flex items. So let's get to it. So up until now the ordering of items has been based on one thing and that is where the item is positioned in the DOM i.e. we have a flex container here representing this first box and we can say item one is the first child as a result of that. It is the first item in the list here. And it's the closest to the main starting position. You can see item four here though is the last item in the list. So as a result it's the furthest away from the main starting position. So just to demonstrate that that's actually the case why remove the item from the start and place at the very end and save you will now say item number one is at the very last position. Right. So we can change ordering obviously if we change the DOM. However that may not always be the situation that we want. I we may not always have control of being able to change how the issue now is represented. So as a result of this flex box created a property called the Order property for Flex items. So the order property is assigned to each item or any item depending on how you want to set it up and the value of order is 0 by default meaning we don't really have an order just use the order that's in the list here. So that demonstrate that I'm just going to create a C asset class here called the default order which is one of the classes I go to that very first container that and we're going to apply a rule to every item and I must set the order idea to zero and if I save that we can see we get no change over here. So the order is stays as intended. Now once again if I come over and I cut this out and I put it at the very end and save you'll say no one once again goes to the very end. And that's because every item has an equal ordering position. Right. So how do we actually use the order properly to change the ranking of the items it's based on numerical value. So it can be any number you want but the lower the number of an item is the closer to the mainstream position that item will appear and the higher the order number is the further away from the main staying position and on will appear. So an example of this is say I want to for the second container push the fourth item to the very front row. How do I do that. While I've created a selector or class on that container called last to first and then effect affect the very last item to do that it just got lost of type like. So I'm grabbing the very last item in that second container and I'm going to say because all the order values default the zero. I'm going to set this one to native 1 so it's lower than all the others. So if I save that and we can now see Autumn. Item number four is now at the very front. And that's because it has a lower order value than the rest of the items in this container. Now also for another example if I say I want no one to now appear at the end we have to give a higher value. So is another selector I have first to last. So this will affect the third container and I'm going to grab the first of type this time you go. Order is one that is higher than zero. So it's higher than the rest of the items inside of the container here. So two three and four will stay in that order but one will now appear at the end. So if I save it you can now see the number one has jumped to the end here. So that's the basics of how we can move things around. Now we'll just have a couple more examples. Basically we used one and negative one so far just to shuffle things around. But the number really doesn't matter as long as it's lower than everything else. So say I want to if this this box here. I want to move all even numbers to the front but I want the four to a people for the two. All right. How can we do that. Well I just give a lower value for two and four then one in three. So in this case a 1 and 3 0 and 2 and 4 would be some value that's lower than that. And then because for in the current ordering is higher than two by default I have to give for a lower value than two. Okay. So let's see how that works. So if I guide dog even to front which is the class of human to that container and I'm going to go item and then specify end of type even so we're very old. Even the items in that list I'm going to set the order value to suddenly hear like negative 10. If I save that and we look at what we've got we now see items 2 and 4 now appear before 1 in 3. Okay so that's half the battle done. We've got the even numbers before the odd numbers. However I said I want to have 4 before 2. So they are currently these two values have an order value of negative 10. The 4 needs to have a number. Order number lower than the 10. So once again I can create a similar selected the one I have appear. Copy and paste and then rename to even to front so we got the right container. Here even to front and a loss of type. And because we know as they intend to specify this is native eleven. And when I save that. We're now going to say the 4 has pushed to the front. Okay. I.e. it has a lower order value than the second. So therefore it is closer to the main starting position. And that's the other thing that you have to remember is that based on the direction of the main axes whenever we have a lower order number it will try to stay at the main starting position. And if it's a high number it will appear towards the main end position. As far as it can go. OK. So just keep that in mind. And finally for this last one we're going to do something a little bit funky we're going to put the third item first followed by the first item to be second followed by the fourth item to be third and then last. We're going to put the second item is the very last option. OK. Now I've called this the jumbled container so I've got jumbled right now I'll put the third item first. So to do that I just got item and we got enough of tied to specify three here because we're talking the third item and then order. And then analyst said it too negative to finish. And the reason why I do that is because I want to have one before the before the value of four which will keep zero so got dative 2 for the third one and then rather than I actually will run it right now in the safe C make sure that the three goes to the front. And it does now for one I can leave it as is but the. And we essentially we can do that but explicitly said here just for interest sake. And I mean I actually set them all explicitly just to indicate that it works. So for the second one off sorry the first item will put that in the second position so jumbled the item first of tied they said that order to mean had one and when I save that we get no change. So the item now has been explicitly set to be the second lowest valued of all the values currently. That's why it's in the second position. And now for the fourth item which we're saying we want to have as the third position last of type order I'm going to sit here to zero. Even though that's the current value so I'll save that and nothing changes. And there is one of the changes is because the second item is still a value of zero. So therefore physically in the dorm it's before the fall. So that's why the piece before it. So as a result of that in fact I talked it wrong up here too which doesn't help my case jumbled and the item and of tied to is of grabbing the second item and I'm going to set that to an order of one meeting. It's going to be the very last option. If I've done all this write down I save. We now get the ordering that we expect item three is first item one is second item for is. Third and two is last. That's pretty much all I want to cover in this video. So the next video we're going to look at how we deal with sizing of flex items. So I'll say that.