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.
So far, we've controlled element orientation, distribution, and flexibility using the new flexible box model. In this movie, we'll finish our look at the flexible box model by tackling options for controlling element alignment. So, I have the flexible.htm opened up. And again, just to kind of let you know where we are, if I preview this in Chrome you can see that we just have all of our elements displaying horizontally. Again, there is no explicit flex-box value or any type of box distribution as we've done in our previous movies.
So we're just kind of back to that basic layout. Okay, so what we're going to first do is tackle vertical alignment in this horizontal orientation and we are going to do that through the use of the box-align property. All right, so if I go down to my container div tag, I'm going to go ahead and give it a height of let's say 900 pixels. Now, if I save this and test this, notice that all these elements are stretching to fill that space. So, if we preview that in Firefox, notice we're getting the same behavior.
The elements are just stretching to fill that vertical space. Now, what's going on with that? Well, that has everything to do with the box-align property. Box-align property has several keywords that you can use to control how these elements are going to align within that available space. Stretch is what you're seeing and that's the default. So, let's go ahead and experiment with the box-align property to see what it can do for us. So, on my container rule, just below my box orientation, I'm going to go ahead and add -moz-box-align and as I mentioned before, there are several keywords that you can use.
You can use stretch, start, end, and center. Now, stretch was what we were seeing and that's the default. So if you don't specify box-align, you get stretch and this is going to stretch to fill that available space. Let's choose start and I'm going to do the same thing for -webkit-box-align: start, and then just regular old box-align: start. Okay, so what's the difference between start and stretch? Well, I'm going to preview this in Chrome.
Now, we can see that now their intrinsic height is being respected. So, notice that it's not giving them a fixed height. It's giving them whatever their intrinsic height would be, and that's why a second child is a little taller there. Same thing for Firefox. We see that same behavior in Firefox, although notice that their heights look a little different. So again, how those are calculated using the flex-box model is always going to differ a little bit from one implementation to the next. All right, and let's change start to end.
So, if I save that and test that, where did my boxes go? Well, if I scroll down, notice that they are now on the bottom. Now what's really interesting about this in terms of alignment is notice that the bottom edge of the elements are now aligned to the bottom of their containing element and notice that the height value is actually being calculated upward. If I test this in Firefox, we see the same behavior. So nice consistent implementation there.
So start will align the top edge of the boxes to the top edge of the parent; end will align the bottom edge of the elements to the parent. Now I'm going to change the height here for just a moment. I'm going to crank it back up in a little bit, but I want to show you the next one. So I'm going to change it to 500 and I'm going to change the value from end to the remaining value for box-align, which is center. Now this is one of the things that I'm probably most excited about, because if you are a web designer and you've tried to center elements vertically within the space, you know how difficult that is.
Some people are even resulting to displaying elements as tables so that they can use the table cell-align property. I mean there is crazy stuff going on out there to try to get elements centered visually vertically within a page or within a containing element, but using the flex-box model, that's all we have to do. If I test this in Chrome for example, there you have it. Vertical centering. If I try this in Mozilla, there you have it, vertical centering. How cool is that! Now notice also a little bit of an implementation difference here.
Notice the height now is also being basically distributed equally vertically. So, instead of going upwards as end does or downwards as start does, here we see the height being distributed equally. So, it affects the size of the boxes and the distribution of the size based on the contents of the box as well. So, there is a lot going on here that, if you're designing this type of layout, you need to account for. Now, as I mentioned before, box-align actually handles alignment in the opposite direction perpendicular to the orientation.
So, because this is a horizontal layout, box-align is handling the vertical orientation. What if we wanted to handle the horizontal orientation to a horizontal layout? What would we use for that? For that, we use box-pack. So, let's go ahead and check that out. Underneath my box-aligns we're going to do box-pack. So again, I'm going to do a -moz-box-pack. The initial value that we're going to do with box-pack is start. The keywords for box-pack are almost identical to box-align with a couple of important differences, which we'll talk about in just a moment.
So, we'll also do -webkit-box-pack: start. Then we'll just do regular box-pack: start. Okay, so I've saved that and now let's say that we preview this in our browser. Okay, we're not really seeing anything different. Well remember, it is controlling the alignment horizontally, because we have a horizontal orientation. So, start is essentially doing the same thing start did for box-align. It's aligning the left edge of the leftmost box with the left edge of the containing element.
So that's what's happening here on first child. If we change start to end and preview that, again, notice we're seeing the opposite thing happened here. The right edge of the rightmost element is aligned against the right edge of the containing element. Now, because we have some padding, we have some right padding on that containing element. It's not going all the way up to the edge, but it's getting close. All right, so basically, the start and end are doing the same thing for us. Now, we also have a center keyword as well.
This is going to give us perhaps the holiest grail of all of element positioning using CSS, i.e., vertically and horizontally centering an element or elements at the same time. Wow! I'm really excited about that. I mean, check that out. We'll look at the same in Firefox, doing the same thing for us. Again, implementations are differing a little bit on element width, but end result is the same where it's getting vertical and horizontal centering within the parent element by simply saying box-align: center, box-pack: center.
Now, we've noted so far that the differences between pack and align are that align is going to handle alignment perpendicular to the orientation, whereas pack is going to handle alignment along the same axis as orientation. The keywords are almost identical, but remember box-align has the keyword stretch. That's the default. That basically just stretches the element over that axis. However, box-pack does not have stretch. It has a different keyword to achieve something similar to that and that keyword is justify. Okay.
So, we know that stretch does just that with box-align. It stretches the content to fill a space. So, what does justify do? Well, if we preview this in Chrome, you'll notice that justify has the really, really cool effect of distributing the objects along that axis and giving them an equal amount of space between them. Awesome! That is a fantastic capability that I'm really happy to see. However, there is a big problem here. You can see that Chrome supports it. Safari supports it. Firefox, not so much.
So the justify keyword is not currently supported in the Firefox implementation. Now that could change, but as of right now, it's not implemented in this version of Firefox, which I think is a 3.6 that I'm testing on. I know the 4 beta is either out or about to come out at the time of this recording. So, that is unfortunate and hopefully that's going to be added, so we're going to have to check that. Now, interestingly enough, what happens if you flip the orientation? All right, so I'm going to go back up to my container object. Let me go ahead and increase the height to 900 again, because we're going to flip the orientation and it will give us an available amount of space.
So change the height of the container to 900. Then I'm going to go back to my orientation, which is right here, I don't know why I'm scrolling around, and I'm going to change that from horizontal to vertical. What's really nice about this, again, the flexible box model, it basically just says, "Okay, I'm going to go ahead and change the orientation." So, box-align is not going to apply to the horizontal alignment, whereas box-pack is going to apply to the vertical alignment. So we're just going to be switching them basically. So now, if I preview that in Chrome, look at that.
Equal distribution along the vertical axis, centered along the horizontal axis. Of course, we're not going to see that in Firefox, because Firefox does not support justify, but we do have vertical alignment going on and the horizontal alignment is being controlled by box- align, because it is being centered. Again, I could go ahead and change the keyword of pack to center. Save it and test it. Again, now they're arranged vertically in the center of that.
Now, one of the things that you need to be aware of is that a change in orientation could cause some issues with overflow. For example, I've very explicitly came back and changed that height so that everything would fit into that area. But what if it didn't? What if the height was say 300 pixels? All right, what happens then? All right, so I preview this in Chrome, notice that when we do overflow here, The overflow is actually going to do just that. It's going to visible. it's going to overflow the containing object. Now, you would expect the same behavior in Firefox, but that is not what we're seeing.
So, let's go a little bit lower with that, at 200 pixels of height. Try that in Firefox again and notice that Firefox, instead of allowing for overflow, it essentially holds the containing object to the lowest intrinsic height that the boxes are going to create. So, it essentially, just basically, creates more or less a minimum height automatically on it. Webkit does not. Firefox does a very different part of the implantation, so you need to be aware of that as you might want to account for overflow on your containing objects, so you could do like overflow-auto if you want to create scrollable content.
Again, what this is going to do for me in Chrome this is going to get me a scrollable content, instead of letting overflow. In Firefox, and again, we get scrollable content. The Firefox's implementation has some really weird things going on. For example, when overflow is set, a lot of what you have set on your flexible box object, which kind of goes out of the window. I think this has a lot to do with the fact that Firefox and Mozilla implementation is sort of removing this flexible object from the normal document flow.
So, it treats it very much like a float and we get some of the same things going on here. So notice that, box-align is now default into stretch, no matter what you have it set to explicitly. So, you really need to test all of the stuff thoroughly before you try to implement it on your pages. Remember that this is still very experimental property and all the implementations are still evolving. So those are things to look at. Box-align really become a perfect example of where support for the flexible box model is currently. It's close enough to tantalize us with possibilities like vertical centering, but it's not far enough along to fully embrace yet in your own layouts more than likely.
Keep data support in mind when considering using the flexible box model for your next project. As with much of CSS3, I really recommend just experimenting with the flexible box model for the moment, and then keeping an eye on its support, so that you're going to be ready to take advantage of it when the implementations are far enough along and the time is right to use it.
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.