Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
One of the capabilities of the flexible box model that I'm most excited about is the ability to change the distribution of boxes apart from the normal document flow. This is going to allow you to present content to users in any order that you wish, regardless of the order that it appears in the actual code and then to change that distribution at any time. Now let's take a closer look at that by opening up flexible.htm in the 05_04 folder. Okay, so again, kind of what we've been working with in the past couple of exercises, one of the differences is that the box-flex property has been removed from those guys. We are back to doing a horizontal alignment.
So if I were to preview this in one of the browsers, we are just kind of seeing it the way we first started out. So what we are concerned about at the moment is the order in which these are appearing. Okay, so one of the first things that we can do and one of the most general things that you can do is you can simply switch the order if you'd like. You can just reverse that. So to do that I am going up to the container selector, and again we're just going to use the box- direction property for this. So here I am going to do -moz-box- direction and I am just going to reverse it.
I'll do the same thing for WebKit and then just go ahead and give the generic box-direction: reverse. I am going to go ahead and save that and I want to preview this. And I'm going to preview this in Chrome first. Now you can see that it did exactly what we were thinking it was going to do. It simply swaps the order of the children. The fifth child is presented first followed by the fourth, third, second and first. Now just like the majority of this specification the implementation on reverse changes from Mozilla to WebKit as well. Let me show you what I mean.
So if I preview this in Firefox, we get the reverse order but something else is changed. Notice that instead of aligning the objects to the left side of the page, Firefox is now reversing that as well and aligning them to the right side. This almost like doing float right in Firefox. So here the fifth child is still presented first, then the fourth, the third, the second, the first. But we get a very different behavior based on that reverse from one implementation to the next. So that's something you really need to be aware of. Okay, I'm going ahead and comment that out.
So just wrap that in a CSS comment, /*, */. The reason I am commenting that out is because we are going to come back to it in just a little bit, but right now I want to talk about setting the order of objects explicitly on the objects themselves. The box-direction just gives you the ability to reverse the direction that the elements were presented in. What if you want a little bit more granular control over that? Well, for that we'll use the box ordinal group property. So I am going to scroll down and find my individual selectors and on each one of those guys I am going to set an ordinal value for that object.
So for the first one I am just going to do -moz-box-ordinal-group and I am going to give the first item an ordinal of 5. Basically you number these in the order you want them to appear. The lower numbers are going to appear first, the higher numbers are going to appear after that. So for the first object I am setting it a little bit further down the list. Now we need to do the same thing for each of these vendor prefixes. Now what I am going to do instead of retyping that every single time, I am just going to copy this and paste it into each of these and then change the number.
In the second box I am giving it an ordinal group of 4. In the third one I am going to give an ordinal of 1. You thought I was going to say three! No. So we're going to do 1. We are going to mix it up a little bit. For the fourth one we're going to give that one 2, and for the fifth one, you guessed it, 3. Okay cool. So I going to save that and again I am going to test this in both browsers.
We'll preview in Chrome first. So now you can see the third child is appearing first, followed by the fourth, fifth, the second, and the first, based on the ordinal group numbers that we assigned to them. If I preview that in Firefox, we see that we are getting the exact same behavior. What's really nice about this is that we are not getting that right alignment that we have got when we were reversing them earlier. Now you might be wondering well do all the ordinal values need to be unique? No, of course no. The reason that they're all ordinal group, for example, is because they allow you to group these elements together.
Let me show you what I mean. If we go back in and we change the ordinal group number for 2 to the number 2 and then we do the same thing for 3, I can get 2, and then we go down to 4 and 5 and we change them to 1. So now essentially we've created three different ordinal groups. The numbers do not have to be consecutive either, as you are seeing. So four and five are in the first ordinal group, two and three are in the second ordinal group, and then one is in its own ordinal group at five.
So it doesn't have to be 3. You can skip numbers. That's fine. It's going to just basically take those numbers in the order it finds them. So if I save this and test it, now we can see that the ordinal groups are presented in order. This is our first ordinal group, fourth and fifth. Our second ordinal group, second and third. And then our 3rd ordinal group is the number 5, the first child all by itself. Now notice that the order that the ordinal groups are shown in is controlled by where the elements appear in the code. So because this is the first ordinal group, 4 is appearing before 5 because it appears before 5 in the code.
That order is maintained within an ordinal group. If I test this in Firefox, we see the same behavior. Cool. Now box-direction and ordinal groups can work together. You can combine them together to create really powerful controls. Let's check out how we would do that. If I go back up into my code to the container, I am going to uncomment the box-direction: reverse. So just go ahead and remove your comment from that. Now if we save this and we test it we get a fairly complex behavior going on. The first child is shown first. Remember it was the last ordinal group.
Then we have the third child followed by the second child and then the fifth child followed by the fourth child. So there are several things going on here. Number one, the direction of the ordinals has been reversed. So we are seeing basically ordinal group 5, ordinal group 2, and then ordinal group 1. Those are reversed. Then the natural order of the elements is reversed as well. So within the second ordinal group, the third is being shown first and then the second is being shown last. Same thing is happening to the first ordinal group. Fifth is being shown first, fourth is being shown last.
So reverse, it's truly reversing everything. It's reversing the order of the ordinal groups and the display of elements within the ordinal groups. So again if we look at that in Firefox, we get the same behavior but notice the right alignment has returned. So that is something that you need to account for if you are thinking about using this particular property. So box-direction and ordinal groups, both of those give you a really easy way to achieve flexible element distribution within any of your layouts really. If you have ever tried to rearrange elements within your layouts without the flexible box model, you know what a welcome addition this technique will be.
So we have no more floating and relative positioning and absolute positioning to move things around. We can just simply switch the values of ordinal group or just reverse the layout entirely. Keep in mind the implementation differences. Keep in mind that this is still a young specification. So this is definitely something you want to keep your eye on as the specification matures.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.