This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Code Demo: Individual flex-items" Lesson
[00:00:00]
>> Jen Kramer: All right, so that's pretty much every thing that can go on with the parent. So, the flex container. Now, we're gonna look at the individual flex items, okay? Or the <li>s. And most of the things that have to do with the <li>s. So what we've seen with the flex container, the <ul> in this case, has to do with distributing those items in space.
[00:00:21] What order are they gonna go in broadly, one to six or six to one. How are the space gonna be distributed between those boxes? How tall are they gonna be? That type of thing, right? Okay, what happens when we go to our flex items, it has more to do with ordering and how wide they are, okay?
[00:00:40] Ordering and how wide they are. And also how they're gonna change their size over dimensions. That's the other part of it. Okay, so [COUGH] I'm gonna add the following class to the flex2. So just to remind you again, in our HTML, some of my <li>s have a class of flex1 Some of my <li>s, notably number three and number five, have a class of flex2.
[00:01:06] What I'm going to do here is I'm going to take flex2, I'm gonna give it a border and probably a little fatter than that on the screen, so you can see it a little bit better. And then I can type in a number and that's going to reorder these in space.
[00:01:24] Actually, I will just copy most of that. Oops, copy most of that and I'm gonna drop that here into my CSS. I'm gonna set this up to be five pixels. I'll make it dashed instead, make it a little different than the dotted thing I had earlier. And I'm gonna say for my order, I'm gonna give it the number two.
[00:01:49]
>> Jen Kramer: Okay, so order is a number.
>> Jen Kramer: It can be any number you want, all right? And if you go on ahead and save that and then refresh the page.
>> Jen Kramer: You'll see that what we have now is number three and number five have them pulled out. The way it's on the screen right now looks like they're displayed on their own row.
[00:02:15] But remember that it sort of depends on how wide the pages, now they're not on the same row, okay? So don't make that assumption.
>> Jen Kramer: There they are not on the same row. By default everybody's order property has a value of one. So, by saying two, we've pulled them out of order, and we stick them at the end.
[00:02:39] And because I put in on the class, both of them are on the end in the order that they were before, three and then five. Make sense?
>> Jen Kramer: Okay, we're almost done with this and then you get a quiz. Okay, so then the next things we're gonna talk about are what's called flex basis, flex grow, and flex shrink, okay?
[00:03:06] Flex basis, flex grow, flex shrink and these are often combined if you're taking a look at your little cheat sheet and you take a look down at the children items down here in the bottom of your cheat sheet. You'll see that we are flex grow, flex shrink, flex basis and then you'll notice that we have a property called flex, which is short hand for those three things.
[00:03:28] So if you've never seen. Jenna, I have no idea what you are talking about. Flex grow, flex shrink, flex basis. I've never seen it. That's because most people don't usually write it, they usually write just flex. The word flex and have these properties associated with it. So the first one I wanna talk about though is flex basis because this is the one that you can kinda understand by itself.
[00:03:49] Grow and shrink get a little weird. Flex basis is width, is width. And I put it in quotes because the actual width property, width colon some number, you can think of as an absolute number, okay? So if your width is 200 pixels, it's 200 pixels, no matter where you are it's always 200 pixels.
[00:04:15] But also if your width is 25%, it's always 25% whatever screen you happen to be looking at. With flex basis, you can think of this as sorta 25%, okay? Because it's flexible. So what you basically say to Flexbox is this. Hey, Flexbox, please try to get as close to 25% as possible, but I know you got a factor in like there's maybe some margin, or padding, or other weirdness going on in here.
[00:04:48] So if you don't get to quite 25% and it's actually more like 27%, or maybe it's 30%, or whatever it happens to be, that's okay, all right? So it's truly a relative sort of number. So that's how I've explained it here. And we can go on ahead, and put that in.
[00:05:11]
>> Jen Kramer: In our style sheet. So here again on flex2, is that what I said? Flex2, yeah, flex2. We can go ahead and add a property of flex-basis. And then that could be followed by a number, it could be in pixels, but probably not the best thing in the world.
[00:05:29] Probably a better way to do it is in something like percent or in the view port units, view port height, view port width, that kind of thing, are probably the better units to choose. So let's just go in ahead and say that it's going to be 25%, since I keep saying that.
[00:05:50] [COUGH] And if we refresh our page. Then you'll see that here's flex box trying to set these up to be 25% wide, okay? But sometimes the screen is too big. And actually we're, you should be looking at just those two blue ones down there on the bottom, okay?
[00:06:09] So because I didn't put on the <li>s, so not all of these items are gonna be 25%. But if you watch the two blue dotted ones that are currently at the bottom row, they should be taking up about half of the screen, right? About 50%. So if you watch they are kinda close to that, see how they're kinda close to that?
[00:06:35]
>> Jen Kramer: You can imagine that they're taking up about 50% but not always, not perfectly, okay? Make sense? Okay, so never use the width property on your flex items, do not use the width property on your flex items, you're gonna use flex basis, okay? Flex basis. So when we code our grid system later on today, we're gonna do it with flex basis as our quote width.
[00:07:07] We're never gonna use the width property.
>> Jen Kramer: All right, and then the last two numbers here, and I'm gonna switch over to just plain old flex, are the grow and the shrink properties. So if you write this out as flex: 0 1 25, this is a fairly typical number that you would see for the flex property.
[00:07:29] The first number is the grow property. The second number is the shrink property. And the third number is your flex basis. So this is how it's written in short hand. And the grow and the shrink have to do with how fast a box expands or how fast it shrinks in space.
[00:07:46] So right now all of our boxes are growing and shrinking at exactly the same rate relative to each other, right? So if we were to say we'd like these boxes here on flex2 to grow twice as fast as other boxes, let's say that we say a flex2, all right?
[00:08:07] So the grow property becomes 2. Grow these twice as fast.
>> Jen Kramer: If we were to do that and refresh our page, look at our little boxes here. See how they sort of jumped really wide?
>> Jen Kramer: Now they're giant.
>> Jen Kramer: Okay.
>> Jen Kramer: So that's would grow and shrink typically do.
[00:08:36] Usually, when I'm looking at people's grid systems built with Flex box, they aren't really making use of the grow of the shrink properties. These tend to be more useful if you're using Flex box in the appropriate manner. Say, like you have a bunch of images coming off of your server, you don’t know how many you’re gonna have.
[00:08:51] You wanna display them on a page in a grid, okay?
>> Jen Kramer: All right, so now that you’re totally numb and you’ve gone through all of these properties, do we have any questions on the properties so far that we've looked at in isolation in this exciting screen.