Join James Williamson for an in-depth discussion in this video Defining element display order, part of CSS: Flexbox First Look.
One of the biggest problems with float based layouts is their dependence on the source order for layout. You know, basically, we can't do much with floats to separate the order in which the elements are presented from the order in which they're found in the markup. Flexbox does just that by giving us the power to reorder our elements any way that we want. So to experiment with this I've opened up the order.htm file from the 04_01. And just structurally if I scroll down, you can see that we have our flex container with our boxes inside of it. And notice that each of these has classes that correspond to them. One, two, three, and four.
Now, because in the source order one shows up first, two after that, three, and four, if I look at that in the browser, obviously it's how we expect to see them. One, two, three, and four. If this was a float based layout, we could do something like floating two to the left and one to the right. And it would kind of fake it a little bit, maybe. But it's very difficult to have total source order independence saying, hey let the third one show up first, then number two, then four, then one. That's pretty much impossible to do with float base layouts.
Well, very, very easy to do with flexbox. So, if we go up to the css, notice that I've already got some selectors all ready to go for you. And I'm going to start with the one selector. Now, the property that we use in order to reorder them is the very aptly named order property and that's all you need. Now, of course I'm going to do our prefixes, so I'm going to say webkit dash order and then you pass a number in. Now, that number can start at zero and it can go up as high as you need it to go. You can use negative values for it as well.
We'll talk more about that a little bit later on. Essentially the lowest value shows up first, followed by each corresponding value. So, if I say webkit order 4 for our first one and then follow that up with ms.order of four, and follow that up with just the generic order property of four and I'll tell you what rather than having to write out all those prefixes again I think I'm just going to copy these and then paste them in two, three, and four.
Now, you know, here's something interesting. Copying and pasting them actually let me show you guys something pretty interesting. If you do the order property and you give them all the same value, watch what happens. One, two, three, four. Essentially if you're using more than one value once, then source order is used to determine when that element should appear in the presentation. But if we change this around. Let’s say we change number two to three, and we change number three to two, and then we change number four to one. Now actually, in terms of the index that it starts with, it starts counting at zero.
We're actually leaving zero empty if you will. So, if I save this and go back into my browser, notice now, four, three, two, one. Now, I mentioned before that these do have total source order independence, so if I go number three and I change its value from two to zero and save that, notice that now number three shows up first followed by four followed by two followed by one. So you're allowed to do any order that you want. It does not matter. And negative values are accepted as well.
So for two instead if I said say negative five, say that. Notice that two shows up. Now, the reason I'm really making a point of showing you the negative values, is that for a lot of dynamic layouts, one of the things I've seen people do before with flexbox, since they don't really know what the order of properties is going to be, if there's an element that they want to ensure shows up first, then they go ahead and give it some crazy negative value like negative 200 and that way no matter what else is going on within their layout that's the first element that shows up. So for the most part the order property is pretty easy to understand and implement. However I feel like I have to warn you here, just like alignment the flex flow property can cause a little bit of confusion around how the order property works so we're going to take a look at how those two properties combine in our next exercise.
- Reviewing Flexbox support
- Defining elements
- Controlling element flow
- Wrapping content
- Defining display ratios
- Aligning single and multiple items
- Nesting flex containers