Check out a free preview of the full CSS In-Depth, v2 course:
The "Flex Item Properties" Lesson is part of the full, CSS In-Depth, v2 course featured in this preview video. Here's what you'd learn in this lesson:

The look and feel of flex items can be set with flex container properties, but there are flex item properties to alter the look and order of individual flex items.

Get Unlimited Access Now

Transcript from the "Flex Item Properties" Lesson

[00:00:02]
>> Estelle Weyl: Next we're gonna talk about flex items. So we've been talking so far all the properties have controlled the flex items based on the flex container but you can actually control flex items individually.
>> Estelle Weyl: So we have the align self property, remember we had the align items property, Which align an item within its line.

[00:00:25] And they all went to the top, or they all went to the bottom, or they were all stretched. You can override that align items on each individual one. So here C by default, the whole container is gonna be the same height as C, because C is the one with the most information.

[00:00:47] And I've aligned all the items in the center, but I said, just B, I want it to stretch. So A and C are both centereds, but C looks like it's stretched because it is taking up 100%. And B is not being a line centered, it's actually stretched. Flex-end, I can bring it all the way to the bottom.

[00:01:11] I can bring it all the way up to the top. I can do baseline.
>> Estelle Weyl: And since it's the only one at baseline, it goes all the way to the top. What does auto do? Someone asked that earlier, right?
>> Estelle Weyl: Auto basically says align center because that's what the parent is saying to do.

[00:01:36] And then we had center stretched baseline, okay, so we're good. I could have done the same thing with A.
>> Estelle Weyl: All right, so I'm only moving one. That is the align-self, which overwrites the align-items property just for the elements on which it's declared.
>> Estelle Weyl: So here just the h.

[00:02:08] So this previous one here was a single line, right? This is a single line of flex items. Here we have multiple lines of flex items. The letter h is the one where I'm gonna overwrite because it says h or line stretch. So all of them on the container, it says align-items: flex start;.

[00:02:33]
>> Estelle Weyl: Or align-content: flex end;, rather.
>> Estelle Weyl: So align-content: flex end;, means that all the content is down at the bottom. Or align-items mean that within each line every item is aligned to the top of that flex line. So the difference between align-content says go all the way down to the bottom, align-item says within each line go to the top.

[00:02:57] And then align-self says just for one item on which I'm gonna declare it flex end, oops, and you see how the h is down at the bottom. So F, G, I, J, A, B, C, D, E and K they all inherit the align-item from the parent, from the container.

[00:03:25] And that's usually what you wanna do, you want all your elements to look the same. You don't want one to look different, this does not look good. But even if they were all looking the same, it would still look like crap because I used a pale green, orange, yellow, an icky font, cuz we are trying to make things look as ugly as possible today.

[00:03:42] So that's the align-self property.
>> Estelle Weyl: Then we have the order property.
>> Estelle Weyl: So by default, every single element, or a flex item has the order of 0, they're all 0. So they all will be in the order that they were declared, every order value, so you can change the order to -1, to -50, to 400 whatever you want.

[00:04:12] But every single item that has the order property with the value of -1, will come before all of those that have 0. But all of those within the group that have the value of zero would be in order of the mark up. And all of those with -1 would be in order of the mark up in terms of the ones that have value of 1.

[00:04:34] So let's show by example cause explaining it is a little bit hard. So here, we already know that this go in alphabetical order, right? So let me just do X and X. It goes Alphabet, Banana, Crayons, Dinosaurs, Eggplant, Foundation, Ghost, Happy, right? It's in alphabetical order. I've put display flex.

[00:04:58] So it's a flex box on the parent. And then the flex flow says row. So it's gonna go across from left to right. And then top to bottom because it allows to wrap but it's not wrap reverse. So the cross axis is from top to bottom the main axis is from left to right.

[00:05:14] Then I say every third one, give it an order of -1. So all the dark gray ones came before the medium gray and the white ones. But within the dark gray ones, they're still in alphabetical order. It says Crayons, Foundation, Igloo, Lasso, Orange, Rancid, Umbrella, Xylophone. I have no clue what mood I was in when I came up with these words.

[00:05:40] So all the ones with an order of -1, comes before all of those with an order of 0. Then I'm gonna give all these a 1, which means they all come after the ones with the value of 0, but they are also in alphabetical order. So the third group is Alphabet, Dinosaurs, Ghosts, Janitors, Magic 8-ball, Petunia, Shoelace and Valentine.

[00:06:06] If I were to do -2,
>> Estelle Weyl: Or-
>> Estelle Weyl: -11, they would come before all those with a -1.
>> Estelle Weyl: And then if I were to give all of these, order -22. That's on the parent, it has to be on the child. Okay, that's why it didn't work. So do you understand how order works?

[00:06:34] Not only does it change the order, but once, if more than one element has the same value for order, it's in the order of the HTML. It'll be in the same order as the code of the markup.
>> Estelle Weyl: And this is just here because it's pretty. No, it's here because the navigation here-

[00:06:59]
>> Estelle Weyl: I gave it the order of 4.
>> Estelle Weyl: And so it's at the bottom, because it's greater than 0. But you'll notice what I did. I gave it both the nav and the footer in order of 4, because by default nav and footer both have 0. If I only gave nav an order of 4, footer would still have 0 and will come before the nav.

[00:07:27] And I definitely want the footer to come after the nav. So by giving nav and footer both order a value of 4, they're both last, but they're still in the order in terms of the HTML, nav can be for footer. Does that make sense to everyone?
>> Estelle Weyl: Okay, so in terms of accessibility.

[00:07:50]
>> Estelle Weyl: The screen reader is gonna read it in the source order, I think except for Mozilla. But that will probably be fixed, but I'm not sure. I think there's one browser that was like maybe we should read it. The interesting thing is and the thing to worry about is the tab order.

[00:08:08] A lot of people access websites using the keyboard not their mouse. So a visual reader will look at it and point to something and click. But that's fine but if you're tabbing, and you have the top part for search engine optimization, some bs stuff on the top, because it says baseball, baseball, baseball.

[00:08:32] Or actually, it would be sex, sex, sex, sex, sex, because that will bring up your order on many more views. And you put that on the bottom, and someone starts tabbing through your page, they're not gonna see where their mouse is. So realize that you wanna think about the tab order when you're reordering things.

[00:08:51]
>> Estelle Weyl: And then right to left languages, it's kind of awesome, because it will flip it for you, and it'll follow the source order. So it'll put your first div to the right. And then, a second in the order that they read.