Join James Williamson for an in-depth discussion in this video Aligning single items, part of CSS: Flexbox First Look.
In addition to being able to align all of a flex containers flex items along the cross axis, Flexbox also allows you to align a single item along the cross axis. And you do that with the align self property. So I'm in the self.htm file, found in the 0303 directory. one slight difference in the page structure. If I look down here I can see that among my boxes I have one box, and it's the third one right here, that has the class of self applied to it. So, we're going to take a look at what align self does for us.
Now, align self and align items are very similar. They used exactly the same property, so you have auto, flex start, flex end, center, baseline, and stretch. They give you exactly the same results but align self allows you to apply that to an individual flex item, rather than all of the children of a flex container. So, it's extremely handy because you can have all of your flex items, for example, of say, stretching, and then take one and put it in the center. So, it's very, very useful. Now you'll notice that right now, currently I've got all of the flex items in this container aligning to the flex end.
So if we were to look at that in the browser. You can see that each of these items are just coming down and nesting sort of down towards the bottom, right against the bottom edge of the flex container due to the flex end cross access alignment. Alright, so what we're going to do is, we're going to write class selector for self. And I'm just going to go ahead and start on some of these properties. I'm going to type in dash webkit, dash align, dash self. And as I mentioned before, we have auto, baseline, center, flex end, flex start and stretch.
Let's go ahead and do flex start to start off with. So, we're going to do flex start. For the ms syntax or the tweener syntax, it's actually instead of a line self, it's flex, dash item, dash align. So a little bit more awkward there. And for this one, again we're just going to do start. Remember for the tweener syntax we have start, end, center, baseline, and stretch. So the only difference is it doesn't have the flex dash start and the flex dash end. Alright, and then finally we'll just do the non-prefix property, which is align self.
And here we're just going to do again flex dash start. Okay, so, I'm going to save this. Go back out to the browser and you can see that 3rd element that has a class applied to is now up at the top of the parent container because it, its cross axis alignment is flex start while the rest of the flex items are flex end. That's extremely handy. If I wanted to vertically center this, for example, I'll just change this property to center, on each of these. Save that.
And you can see number 3 is now vertically aligned to the center. Now one thing that I do think is important to point out is that if you set it, if you set align self to auto, which is essentially the same as not defining it at all. What it looks for first, and let me say this and, and go over to the browser. What it looks for first is what the align items property is for the parent container. If it doesn't find one of those it does the same thing that align items does and defaults to stretch. So you can see it's picking up flex end because the flex container is set to flex end, so that's one of the things you have to be aware of. A lot of times you might set it to auto just anticipating that it would stretch, because that's what align items does.
But align self first looks to the parent container and says what is your align items property, whatever that is, I want that. And if it doesn't see one defined, then it becomes stretch, so if you want it to default the stretch, remember to go ahead and define it as stretch. Don't just assume that auto is going to be stretched the way it is with align items. Alright, so I'm going to save that and you can see now 3 is stretching. So, there you have it. I think you'll agree with me that align self gives you a tremendous amount of flexibility when aligning items with Flexbox.
There's one more thing that I really want you to keep in mind. Unlike justified content, or line items, the align self property needs to be applied to the flex items themselves and not to the parent flex container. That's a very important distinction to remember when you're wanting to align those single items.
- Reviewing Flexbox support
- Defining elements
- Controlling element flow
- Wrapping content
- Defining display ratios
- Aligning single and multiple items
- Nesting flex containers