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.
In this movie, we'll begin to explore the flexible box model by learning to control box element orientation. Now the first step in using the flexible box model is to assign the display property to all parent elements that we want to control and then to define an orientation for their child objects. So I have the flexible.htm. This is a very simple document. If I scroll down to the HTML, you can see that the structure of it is a simply a wrapper div tag which contains another div tag with ID of container.
The container div tag has five child div tags in it and they're all labeled 1, 2, 3, 4, and 5. The styling is also pretty basic. If I were to preview this in the browser, you could see that there were five div tags that are just using normal document flow currently to stack one on top of each other. So what we are going to do is we are going to enable flexible box model positioning for the container div tag and then display these children horizontally rather than vertically. Now you might be wondering why did we need the container div tag? Why don't we just use the wrapper div tag as the parent and set its display property to box? Well, the big problem with that is in browser implementation, it's not anywhere in the spec and I can't find it in Mozilla's developer's website.
However, when you set a container's display property to box, in Mozilla the element is removed from normal document flow very similar to a float. That's not the way the implementation is done in WebKit, but in order to allow my wrapper div tag to center all the content on the page and to control it, I need to have that container inside of it, so that I can still keep it within normal document flow. And it's just little differences in implementations like that with experimental standards that you really have to look out for.
That's one of the reasons why it's so important to test. Okay, so with that in mind, I am going to come up to my styles and find the container selector. And inside the container selector, we are just going to go ahead and set the display property to box. Now, if we were going to do this by the specification, we would just do this. We would say display: box. And that's all there is to it. It's a new available value for display property, which has been around for a very, very long time, but the problem is, again, this isn't supported by all browsers and if we wanted to work in the browsers that do support it, we need to use a vendor prefix.
So on top of that, I am going to go ahead and create a couple of empty lines and then on top of that, I am going to go ahead and place my vendor prefixes. So I am just doing display: -webkit-box, and we'll do the same thing on top of that. Again, display: -mozilla-box, so -moz-box. Okay, so now we have three display properties and they are passing the vendor proprietary prefixes and then just the normal display property box, so that eventually if it gets dropped or other browsers begin to support it, it would still work within those browsers as well.
Now if we were to save the file and test it right now, we really wouldn't notice a change in it at all. The reason we wouldn't is because vertical stacking is the default for the flexible box model, the same as the normal document flow. So you really wouldn't notice a change. In order to effect a change, we are going to have to change the orientation of our child elements and we are going to do that by using the box-orient property. Now this is a property that does require the prefixes as well. So, we're going to go ahead and do - moz-box-orient, and we are going to set that to horizontal.
I am going to do the same thing for WebKit. So -webkit-box-orient, and again, horizontal, and then the next we are just going to use the default box- orient and again we are going to do horizontal here as well. Okay, cool! That is all there is to it. If I save the file and preview this in one of my browsers, now the boxes instead of just stacking and displaying vertically are displaying horizontally. I want to double-check that in Firefox just to make sure it's working in both.
It is indeed working in both, and really throughout this chapter I am going to be previewing in both of them, because I want you to see the differences in implementations. Usually differences in the implementations of standards are pretty subtle. You don't really notice them that much unless specific things come up. In this particular standard, the flexible box model, there are large differences in implementation and you can physically see them. So I want to point those out to you when they arise. Now you got to admit, the ability to create a horizontal layout like this without the use of floats is pretty cool.
That means later on I have to worry about clearing anything or worrying about margins and padding and how they affect floats and how floats affect them. It's fantastic. Now I think it is important to remember, however, the differences between the implications in Mozilla and WebKit could cause issues with certain layouts. So it's a good idea to keep an eye on how these implementations evolve in the future and how they might affect any of the layouts that you are experimenting with as you start to learn about the flexible box model.
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.