Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
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.
The flexible box model is designed to be just that, flexible. In this movie, we'll explore ways that you can take advantage of that by utilizing the box-flex property. The box-flex property allows us to control how child elements respond to the available space within their parent elements. So here I have the flexible.htm file open, and again it's the same layout we had before. Just refresh your memory or in case you didn't watch the previous movie, notice that we have this containing element which is a containing div tag. It has five child div tags inside of it.
It has a fixed width and its display property is set to box and its orientation is set to horizontal. That means that the boxes inside of it are being displayed horizontally, not vertically as they would be displayed in normal document flow. Okay, well, one of the first things that we are going to do is go down and take a look at the selectors that we have available to us for all of our child div tags. We have 1, 2, 3, 4, and 5. Now the first thing we are going to do is we are going to add the FlexBox property to these so that each of these elements becomes flexible.
So we'll start with our first one and of course we are going to be using vendor prefixes for this one. So mozilla-box-flex. Now any value over zero makes it flexible. So we are just going to choose one, and so we'll do the same thing for webkit-box-flex, go ahead and set that to 1, and then finally box-flex and we are going to set that to 1. Okay, great! Now we want the same thing for each one of these guys so if you want you can simply copy and paste them in each of these selectors the way that I am doing here.
Now what we are doing is we are telling the parent element that hey, all five of your child elements are flexible and you should go ahead and fill up the available space with them. So I am going to go ahead and save this and preview this in the browser and you'll notice that now instead of being the fixed width that they were set before, they're now filling up the available space. So here we have a selector that's telling each of these guys to be 100 pixels wide, but notice that setting the box- flex property making them flexible overrides their fixed width.
Let's check that out in Firefox as well, and we can see we're getting pretty much the same behavior in Firefox. Excellent! Now what happens if some of our boxes are flexible and some aren't? Let's say we take our first box here and we set its value to 0. Now doing this basically turns the flexibility of the box off and it's going to return it to that fixed width. If I save this and test it, you will see what I am talking about. You can see the first child returns to being 100 pixels wide and then all the rest of the children remain flexible.
What's really neat about this is that I didn't have to recalculate how much space the other boxes are going to take up, or how much space the other boxes need. The browser is just going to do that for me automatically. That is extremely, if you'll pardon the pun, flexible. That means that I don't have to worry so much about calculating what the exact width of an element should be, how much padding should be between it. I am going to just issue some padding and it will go ahead and flex the box for me. Of course, it's not going to work for every layout. Some layouts need to have that fixed size in the middle of it, but this is pretty cool.
Now currently we are looking at a fixed layout. If you can make the boxes flexible, obviously they're well-suited for flexible fluid layouts, right? Well, let's find out. So I am going to up to my wrapper div tag, which is currently set to a fixed width. I am going to change that to 80% instead, to make that a little bit more flexible. Now for the container object, it also has a fixed width of 960 pixels and if you were looking at the code earlier, you might have been wondering about that. Hey, if I set the wrapper to 960, why would we have to set the container to 960? Well, one of the problems with browser implementations, again, is that Firefox and WebKit based browsers differ here.
Essentially in Firefox for the Mozilla- based browsers, if you want box-flex to work, the parent element has to have an explicit width set on it. Now that doesn't mean that the width has to be fixed. It can be percentage based. It can be any value you want, but it needs to have an explicit width. So even though the wrapper is 960, even though the container is a box level element that would have expanded to fill that space, I still had to put that explicit width on it so that we can get this to work in Firefox. So I'm going to change that width now to 100% so that it continues to flex and continues to fill the available space within the wrapper.
So this is something we are having to do, because of the differences in browser implementations. So now essentially, guys, we have a flexible layout. Our wrapper is set to 80%, the container side is going to fill that up, and then our flexible boxes are going to respond to any changes in the screen size. So if I save this and test this, again previewing it in Chrome first, and if I resize my browser, just go ahead and make this flexible, notice that the remainder of the layout is flexing right along with it, which is really cool.
Now right now all my flexible boxes are essentially the same size because they all have the same box-flex value. What if you were to change one of them? Let's say we take our second box and we crank that way up. Let's make it around four or so. So it's not really a multiple. It's temping to say that's going to make it four times the size of the other ones, but it's not. It's a ratio that you establish basically. You have five boxes, three of them set to a one, one of them set to a four, and one of them a fixed size. That establishes a ratio between the flexible boxes and the fixed boxes.
So I am going to go ahead and save this, test this, and you can see the second child is certainly not four times the size of the other ones. If I start to expand it, notice when it has that available space, it takes up much more room, but this is a very fluid calculation in how the browsers do the calculation differs based on the implementation. You'll notice as this begins to shrink down, the intrinsic width of the boxes is honored for the most part. You'll notice in WebKit based browsers, the content is allowed to overflow.
All right, let's checkout that behavior in Firefox. So again, notice in Firefox we are getting that sort of stretched width because it has a four, as opposed to the ones these guys do, and when I shrink the screen size down, again notice its flexible as you would expect from something called FlexBox, but as I shrink this down, notice that we have a specific moment in time where Firefox basically assigns a minimum width to these and it's the intrinsic width of the box based on the padding and the content.
Whereas WebKit based browsers allow overflow to happen, Mozilla does not. Now notice that Mozilla does allow the child objects to overflow the container. So that's still happening, but the content is not overflowing the flexible boxes themselves. So that's a very big difference in the implementation between one browser and another. You'll also find if you do a lot of testing, that the calculation of the sizing ratios is different in Mozilla- based versus WebKit-based browsers. For example, the second child here will be a little wider in the WebKit-based browsers, than it is in the Mozilla-based browsers.
That's not always such a huge deal, but sometimes it can be a very big deal. So again, you're going to want to watch the implementations very carefully, based on experimenting with these. Okay, this isn't all that different so far from doing floats instead of percentage based width, so you are probably sitting there going "Well, that's kind of nice, but I can do that with floats and I don't have all these implementation differences." Well, that's true. But one of the things that's really, really cool about the flexible box model is that it's flexible no matter what its orientation. So whereas with a traditional flexible layout done with percentages, if I want to change its orientation to be a portrait versus landscape, I've got to do a lot of calculating in order to keep that flexibility.
With the flexible box model, all I have to do is change the orientation. Let me show you what I mean. So if I scroll up and I go up to my containing object and I say okay, I want the width to be 100%, but I also want the height to be 100%. I go up and I tell the wrapper div tag, I want its height to be let's say 800 pixels. Now I can come down and change my box orientation from horizontal to vertical.
So I am just going to go ahead and change all three of these to vertical. And now I am going to add some height information to one of my child div tags as well. Now where I put the height is extremely important to how the flexible box model is going to calculate the space. Let me show you what I mean. So here we have a generic div tag and do you remember before when I said, "Hey, you know that 100 pixel width is being overridden by that flex value," that's only partly true.
That value is used to help calculate or establish the ratio or the sizing of these elements. Remember what happens is you have the available space left over after fixed width objects have been calculated. Well, based on the browser implementation, that size is calculated as well as part of that ratio. Let me show you what I mean. This is better seen than described. So I am going to go in and place a height on these container divs of say 250 pixels. Now the only one that should be 250 pixels at the end of the day here is the first div tag, because its flexibility is set to 0.
All of the rest of them should be some variation on that, right? Well, that's the idea. But if I save this and I test this, specifically in Chrome, you can see that it's having trouble now positioning and distributing that space, because of the fact that if all of these div tags were 250 pixels tall, they wouldn't fit into the available space. So it's having some issues here. Firefox on the other hand doesn't have as many issues with that. Notice that it's expanding everybody and it's expanding them horizontally as well, but notice that the second child, oddly enough, the one who is told to be taller than everybody else based on this ratio, is now actually shorter than everybody else, so that is another very unexpected property.
Okay, but what if we move that? So, I am going to remove the height and I want to place the height explicitly on just that single one. Now to do that I have got to increase the specificity of that selector, so I'm just going to say container space one. Now there is no height established here, so placing it here wouldn't really need to be overridden. I am just doing that to make sure that later on if I change anything else, I've still got a more specific rule. All right! So now we are putting that height explicitly on the first container. So now if I say this, notice the change in behavior. So we go out in Chrome.
Okay, so now the second child is using the correct ratio, that 4:1 ratio of the rest of them, and the first child is 250 pixels. Also, I want you to notice the difference in rendering here. Chrome is now honoring that explicit 100 pixel width for the div tag, simply because the orientation has now changed from horizontal to vertical. Firefox on the other hand ignores that totally and goes ahead and expands all of those as block level elements. But again, notice that we're getting a respect of that ratio in Firefox as well.
We have got 250 pixels, the remaining children are expanding to fill that space, and of course it's using the sizing ratio to determine how tall those particular elements should be. Now the thing that I want to make sure doesn't get lost here in all these sort of minute browser implementation issues and the differences between them is the fact that all we did to change our layout is change it from horizontal to vertical. The spacing issues were calculated on the fly based on the box-flex property. I don't know any other way to say it.
That's extremely flexible for you as a designer. That means instead of having to recalculate everything and redo a layout for landscape versus a portrait orientation, you simply go ahead and make sure the sizing ratios are established for all your elements and then you can say horizontal or vertical orientation based on what you need for that particular layout. That's pretty impressive. Of course, it's not going to work for every single layout or for the ones it does work for or for smaller applications, this is really going to come in handy. So that gives us a really easy and powerful way to establish those flexible layouts, as I was talking about.
Now to me, again, the most powerful thing about it is the ability to respond automatically to any change in the parent element's orientation or screen size. That's a very powerful tool for sites or applications that are going to be viewed on devices that change orientation frequently, such as a tablet or phone, and it's one of the major reasons that this type of layout system has been used in mobile development for some time now. So if you've ever done any mobile development, chances are you may have worked with this type of interface layout before.
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.