0:00:00
In the last lesson, you learned about the power of CSS Grid for creating structural layouts. In this lesson, I think it’s only natural for us to follow up and talk about Flexbox. I mentioned in the last lesson that Grid is superior to Flexbox for most things, but I also made it a point to say, hey, listen, there’s nothing wrong with Flexbox. Flexbox just has a different purpose in our page building workflow.
0:00:26
And it’s important to know what that purpose is versus what the purpose of CSS Grid is. You saw a lot of CSS Grid in the last lesson, now you’re going to see a lot of Flexbox. And we’re gonna talk about why Flexbox is valuable, in fact, why it is critical to your page building workflow, because it is the best way to justify and align content within a container. Justify and align content within a container. That is the primary value and purpose of Flexbox. So I’m going to go ahead and share my screen and we are going to dive in. This is going to be a crash course on Flexbox. Not every single detail of Flexbox but a solid crash course on Flexbox.
0:01:15
Okay, you’re gonna see here I’m in CodePen.io. I’m in a blank project in CodePen, not in a page builder today. I think this is the best way to learn Flexbox. And I think you should follow along with me by creating a blank CodePen project of your own. Don’t try to follow along in a page builder. It will help you accelerate your learning and skill to actually do this in a code editor like CodePen. And this is completely free. CodePen, you don’t have to buy it, you don’t have to pay for it, completely free. Start a blank project, follow along with me, you will learn faster. Make this your little code, your little flex box playground, okay? Alright, so what we’re gonna do first is we just need to get boxes on the page. And the first box that we need is gonna be our flex parent, our container for our flex box children.
0:02:08
So what I’m gonna do is I’m just gonna get a box on the page and we’re gonna call this a flex parent box. And then I’m gonna come down here and say flex parent. Now, you can, let me just be very, very clear right off the bat. You can do this with divs, okay? You’ve seen me add a section, a div, and things like this in HTML before. 100% you can do this, this is nothing special. What this is right here, number one is valid HTML.
0:02:32
Every browser will render this properly, okay? It’s just a, it’s called a custom HTML element and it allows better organization of your HTML. You’ll never really see this in page builder land. I can do this in Brics, but page builders are not designed to work like this with HTML, so there’s not any real value here. Maybe very select cases for doing this inside of a page builder, but in a code editor and in a training environment, it can help you see the different kinds of boxes easier.
0:03:03
So it’s the only reason I’m doing it. There’s no other reason of why I’m doing this, but it is 100% valid HTML if anybody is curious. I’m just doing it for added clarity in this particular training. Because now you’re gonna see exactly what is a flex parent and what is a flex child. So I’m gonna have a flex child here. Now I will say this, if you are gonna use these tags, they have to have dashes in there.
0:03:26
They have to start with a real character right here. Other than that, you can pretty much name things whatever you want, and it’s going to be 100% valid HTML. And they also need an opening and a closing tag, okay? You can’t have self-closing custom HTML elements. So it has to have a closing tag and an opening tag. All right? So we have flex parent, flex parent close, flex child open, flex child close. Then I’m just going to put a P tag in here.
0:03:53
So this will be flex child number one. This is just the label for my box effectively, okay? Now, I’m going to come down and start styling because you notice you don’t see anything in the canvas over here. You just see the text that I wrote. You don’t see any of the boxes. Why? Because the boxes, and this is a really good thing to understand because you are going to have to know how to create boxes with CSS in your page building workflow when we talk about pseudo elements and a bunch of other stuff.
0:04:20
You’re going to need to know how to basically manufacture a box out of thin air with CSS. And so the first thing we’re gonna do is target our main box, which is our flex parent. And the way that you target these custom HTML elements is by just writing their name. If they’re not a class, they’re not an ID, they’re just like a section or a div or anything else. If you wanna target it with HTML, you just write the name of it, and then you’re gonna open your Curlies and start styling.
0:04:49
So what did I say? First thing, the reason you can’t see anything happening right now is there are no dimensions, but there’s also no display property. So we’re going to put a display of block on here, which is going to be a, that’s the default for a div or any other type of element like that. And then we’re going to give it some dimensions. So if it has a width of 50 rim and a height of 50 rim, then we’re going to be able to see it, kind of. I still can’t see it, why? It has those dimensions, trust me, it has those dimensions, but it has no color. Like it has no border that I can visibly see, it has no background color that I can visibly see, it’s just transparent.
0:05:27
And so it’s effectively like it doesn’t even exist because I can’t see it existing. But it is there, it is there, but I can’t see it. In order to see it, it needs to have some definition of structure, which is like a background color, or a border, or something like that. So I’m gonna do a background color of DDE, which is basically like a light gray, and there you see our box, perfect.
0:05:50
So now we have a nice box that we can actually see. Now, I don’t want my children touching the edges of the box, so what can I do? I can add some simple padding. We’ll do 2M of padding and that’s going to push everything into the center of the box. I’m going to actually change the dimensions here to make the box a little smaller. I don’t want it to be quite that big. I want you to be able to see the whole thing. Okay so now I have a flex child inside of my flex parent. Now I can go style the child effectively doing the same things. So I’m going to do flex child and I’m going to do a display of block.
0:06:27
And then I am going to give it a, I’m not going to give this one a width and a height because I want you to see how the flex container, the parent actually influences things with the children. So I am going to do some padding on here. We’ll do a padding of 2M on our flex child. And then we will do a background color of something like dark blue. And then we’ll do a color of text of white. There we go. So we have a nice flex child right there that we can visibly see the boundaries of.
0:07:00
Then I’m going to duplicate that child two more times because I want three flex children, and I’m going to change their labels to flex child number 2, and flex child number 3. Now we have a great starting point for our lesson on Flexbox. And that gave us a little bit of extra practice on HTML, a little bit of extra practice on basic CSS to get to this starting point that we are going to be working with. And if some of you are thinking, Kevin, you could have saved us time by just setting that up and giving us the code to copy and paste. No, no, no, no, no, no, no. That’s not how I recommend you learn. That actually doesn’t teach you anything.
0:07:40
I will say this, the number one tip for learning how to code better, and this goes for CSS, HTML, JavaScript, PHP, doesn’t matter what you’re trying to learn, refuse to copy and paste. Absolutely refuse to copy and paste. Write everything by hand and you will learn 10 times faster. Guaranteed, number one tip for learning this stuff faster. Refuse to copy and paste.
0:08:05
Even if someone gives you a snippet, then they say, hey, paste this, this’ll work. Refuse to paste it. Sit there and write it line by line, and that will teach your brain this stuff 10 times faster, okay? All right, so what we’re gonna do is we are going to change the flex parent to display flex. And we’re just gonna see what does flex box do by default? What is the default behavior of Flexbox items?
0:08:32
And you’re gonna see right here, the default is put them in a row and stretch them across the alternate access, the alternate axis. There is something, an instruction that allows you to control the flow axis, and that is flex direction. What direction do you want your content to go? I’m going to type row, and you’re going to see that absolutely nothing happens.
0:08:57
Why? Because we just talked about this is the default. I gave an instruction that is exactly equal to the default, so you’re not going to see anything change. But the minute I say column, just column by itself, not plural, it’s going to stack them all in a column. Understand? This is very, very, this is the heart of Flexbox. I’m about to introduce the concepts of justification and alignment.
0:09:26
And these perfectly map to the axes, the main axis versus the cross axis. And if you don’t understand that, you’re not gonna understand anything to do with Flexbox. So first things first is you have to understand that row is the default. Now the minute that I create a flex container I have gap available to me. I can gap my content out. I don’t have to use margins anymore. I can now use gap. When this is displayed block I cannot use gap. Gap is not available to you on a on an element that is display block. So I’m going to show this gap of 1M. You’re going to see absolutely nothing happen. But the minute that I change this display to flex, gap becomes available to me. Gap is also available to me on grid containers. So grid and flex have the magical gap property available to them. And that’s pretty much it. Okay, so you see that they’re in a row, they’re gapped out now. Notice that the default behavior here is that they’re stretching to fill the vertical space of this container.
0:10:31
I will tell you something right now about Flexbox. One, it’s confusing. Anybody who says that Flexbox is less confusing than Grid has lost their mind. Like I said, these are people that usually use page builders, and the page builders are doing things for them by default that they don’t even realize behind the scenes. Flexbox is inherently confusing because of the access changes, and the access changes also change the definition of terms, as you’re going to see in just a minute. They also change what’s available to you versus what’s not available to you in terms of your control of the items within a container.
0:11:06
That all makes Flexbox very confusing. Grid is much, much, much more logical and straightforward. If you’re a Flexbox lover, you probably love it because your page builder is helping you out a little bit behind the scenes, and things are not happening that otherwise would be happening. So let’s just, and this is why you should be doing this in CodePen, to learn the real behavior of Flexbox, so that you know what to expect, and what is potentially going wrong, and then you’ll automatically know how to fix it and address it, okay?
0:11:36
All right, so we have our children stretching to fill the vertical space. We have everything in a row. Now let’s start to look at justification. Remember what I said Flexbox is primarily for? It is for the justification and alignment of content in a container or items in a container. So we are going to look at justify content as our first instruction, and I’m going to do something called flex start, and I’m going to hit save. And you’re going to see that absolutely nothing changes. Why? Once again, this is the default.
0:12:09
I’m just asking for the default behavior, so you’re not seeing any visible change. Now I’m going to choose flex end instead of flex start. And you’re going to see that those items move to the end of the container. What is the end? Why is the end to the right and not the bottom? Well it’s because justified content and guys I’m going to put a little comment here and once again this is the most important thing for you to understand in Flexbox. Justify maps to the main axis. You’ll hear people say justify is for horizontal and they’ll even give tips and they’ll say hey you know you have you justify text and it changes its horizontal spacing, that’s how you remember that justify in Flexbox means horizontal.
0:12:56
But guys, girls, class, flex justify does not mean horizontal. Justify means main axis. Main axis is horizontal in Flexbox, but the minute you change the axis, you’re gonna see a different behavior, okay? So justify content flex end. I’m going to go up here to row, and I’m going to change this to column. And we’re going to see what happens here.
0:13:20
Now end and justify this word justify, which was working horizontally a minute ago is now working vertically. See start moves it to the top and end moves it to the bottom. But wait, I thought the tip was that justify works horizontally. No, no, no, no, no, justify works across the main axis. So in your mind, you need to link the word justify with main axis. If the main axis is a row, justify is going to work horizontally. If the main axis is a column vertical, then justify is going to work vertically. See how the definitions change when the axis changes, that is the core of understanding Flexbox. Okay, so I’m going to put this back on row and we’re going to look at some other options that are available to us. So I have Flexstart, which we saw as the default. Flexend puts the content over here. I can also center the content inside of this box. I can also do things like space between, which is going to put equal spacing between all of the items with no spacing on the outside.
0:14:31
The only reason you see space on the outside is because the parent container has padding and it’s never gonna violate that parent’s padding, okay? So no space on the outside is added, is given. All space is between the items. That’s why it’s called space between. That kind of makes logical sense, right? Then we have space around, which puts some space in between and some space on the outside.
0:14:56
But that’s not the same as space evenly, which will give equal spacing on the outside as is on the inside, okay? So I just want you to know that you have all of these options available to you in the justification of content. Now, what are you gonna use most often? Most often you will use flex start, you will use flex end, okay? There it is.
0:15:18
You will use center constantly. Center is very, very, very important. And you will use space between a lot, okay? Space between is used more than space around the space evenly because a lot of times you want to maintain proper page width alignment or content alignment with other things top and bottom. and you want the content, the first item and the last item, pushed to the edge of your container, okay? Just, it’s just how it happens in typical page building workflow.
0:15:47
But there are some cases where around and evenly do achieve what you need, okay? And are very, very, very helpful. So you need to know they exist. All right, so that is the justification of content. Remember, that is happening along the main axis. So what I’m gonna do, I’m gonna switch the main axis again and we’re gonna take a look at all of these. So space evenly, everything is now working vertically, right? Space around is gonna give us this, space between is gonna push the first and last element to the edges and then put all the space in between the items.
0:16:18
And then we have a flex start right here. And then we have flex end like this, okay? So this is main axis control, is justification of content. We do have control, let me set this back to row, and let me put this back to flex start, so we start at the beginning again. We do have control over the cross axis, as I’ll call it, all right? Not vertical, I don’t wanna talk vertical, because vertical can change, right?
0:16:46
I wanna talk about main axis and cross axis. So right now, flex direction is flowing across a row, the cross direction is vertical. Okay so the way that we control the alternate axis is with a line. Now here’s again where flexbox is very very confusing. I would have preferred them to say align content but they chose not to do that. They chose Align items. Okay, so you have justify content, but you have align items. I know it’s a little confusing, right? Okay, but it is the way that it is. Now I’m gonna put something on here called stretch and you’re gonna see and I’m gonna over here in my comment I’m gonna say that this is the cross axis. It’s the axis that crosses the main axis. Okay, align item stretch. Another reason, another thing that I wouldn’t have personally done if I was designing Flexbox, I would not have made stretch the default.
0:17:46
This is the default. That’s why these items are stretching. I would have made the default kind of obvious, Flexstart. Just like the default of justified content is Flexstart. And then I would get items that are unmolested, okay? Why are you stretching my boxes? Like, get your hands off my box. Guys, if I wanted that to happen, we have that as an option.
0:18:11
I could have put stretch, but I don’t want that to happen by default. Come on, Flexbox designers, what are you doing? Don’t you think we need a get your hands off my box T-shirt? I think so. The ladies probably, you know, maybe more than the men, but that’s not, align items, flex starts. We’ve got justify flex start, align items, flex start. Now you have boxes that are exactly what you probably would have expected them to look like when you put them on the page, but here we are.
0:18:41
So align items, flex start, what else do we have available to us? Well, we can go flex end. So now we can put them down there, even though, right, our main axis is things going left and right, horizontal with justification. We still have control over that cross axis, so we can put things at the end. We can go center. That’s a good one. Now, do we have space between here? No, it goes back to just stretching the things. All right, so align item, space between, no go here, just kind of gets us back to the stretch situation. So typically what you’re going to see here is flex start, which will put things at the top. Center, which is used all the time. You actually saw me right over here with this situation. I was centering because the default had things aligned to the top of this box and I wanted everything aligned to the center of the box vertically. So I did align items to the center. See how that works? Things are going to, you know, you’re going to use Flexbox all the time, all the time.
0:19:39
So you’ve got to know how this stuff works. And then Flexend. All right, there’s other ones. These are not all. These are not all. I’m not going into every single detail of control. I want to do the things you’re going to use most often. Now what I’m going to do to make this super confusing is we’re going to change this to column. So the main axis is now column, and we’re going to see what both of these controls do and how they interact now.
0:20:03
So justification flex start. Oh gosh, that’s what put it over on the right-hand side. But justification now deals with the new main axis, which is a column. So flex end, I’ll put those boxes at the bottom. Then center, we’ll put them vertically centered, because now justification is working the opposite way. Look, align items flex start, we’ll put them on the left now. And center, we’ll put them all in the center.
0:20:31
Now everything will be in the center. Okay? So you need to be able to play around with this. Now, does space between work here yet? No, it does not, right? Still, align items does not give you those kinds of controls. You only have those kind of controls on the justification axis. So align items, we’ll go back to center, justify content, we’ll see what space between does now, save. And this is again why I recommend you do this in CodePen. So you can, this is needs to be your playground, your flexbox playground, so that you can really get good. And the game you’re going to play is, you’re going to remove an instruction, type a new instruction, and in your mind you need to know what the boxes are going to do before CodePen updates. That’s the game in your mind.
0:21:15
Like I was just telling you, now it’s gonna go to the bottom, then you saw it go to the bottom. Now it’s gonna go to the left, then you saw it go to the left. You need to be able to do that. You need to be able to predict where the boxes are gonna go based on the new instruction you’re about to give the Flexbox parent. All right, if that’s not all confusing enough, let’s go back to row, let’s go back to Flexstart, let’s go back to Flexstart, and let’s get a little bit more confusing.
0:21:37
So now we have to talk about wrapping or not wrapping content. All right. So I’m going to take these three children right here and I am going to duplicate them. And now there’s going to be six children. And you can ignore the fact that there’s still one, two, three, one, two, three. Oh gosh, we have just broken our box. Broken something you never want to hear, right? You have broken your box.
0:21:57
Well, what happens? The default state of flex, I’m going to come down here and add another instruction called flex wrap. And I’m going to write the word no wrap. And oddly enough, once again, Flexbox designers, I would have gone with that, you know, because everything else seems to have a dash in the naming convention. But they were like, nah, let’s just do a random thing with no dash. Don’t know why, but it is. So that’s the default state. The default state is that everything would just try to squish onto the same row, regardless of how much space is in your container.
0:22:33
But we can tell it, hey, you got to wrap, you got to wrap. You got to let the wrapping happen. So now it’s wrapping. And you see, we have a lot of space in here. What’s going on here? What’s going on here? Well, let’s take a look at something. Remember, our content main access is still a row, right? Even though we have dual axis behavior happening now, the main axis is the row. So the cross axis is the alignment of items. And you’re like, well, I’m already telling it flex start. So what the freak is it doing?
0:23:04
Let me go to center, align item center. But why is there still a giant gap in there? Align items. I know. Flex end. That’ll do it. No, no, no. No, it just keeps this content It again confusion. So now we’re gonna bring in the thing. I thought we should have had from the beginning which is align content and I’m gonna do flex start and Hey now we have what I would have expected Align items flex start to do okay So here’s the thing. Whenever you wrap content in a flex container, this only applies when you are wrapping content and there’s enough content to wrap.
0:23:48
So there’s multiple lines. It unlocks a special control called align content. Okay, and align content is what got rid of that space. See, I can say align content flex end and all of my rows are going to go to the end now, right? If I don’t have an align content instruction, it’s going to have this odd gap between lines. I have to introduce this align content instruction to keep all of the lines grouped together. So this is line control of content inside of a flex container. So let me prove this to you now that if I take off the wrap, okay, so we’re gonna go back to no wrap like this.
0:24:31
So no wrap and I’m gonna get rid of these children, these three children. So we don’t even have content that would wrap regardless. Okay, let’s get back, there we go. Back to where we originally were. Now I’m gonna play with this align content thing right here just to show you. So I’m gonna go, well, you already see it. Flex in doing nothing, center, come on, center, center. No, nothing happens. Flex ends. Come on. Give me something. Give me something. No. Nothing happens. Align content only works when you are wrapping content in the Flex container. Now suddenly the align content does something, right? And look, it’s overriding my align items, which was telling things to go to the start. And And so Flexbox continues to just be quite confusing.
0:25:16
Okay, so we talked about justification. We talked about alignment. Now, let me blow your mind even more, okay? We’re gonna talk about flex direction, two more directions that you have available to you. We had row, we had column, we also have row reverse. So what’s happening here? One, you see that the children are reordered. It goes 3, 2, 1, where before it was going 1, 2, 3. And all the content jumped to the other side of the row. So what row reverse does is it reverses the order of the children and it reverses the entire flow of the axis. So if there’s content that was fitting to the left, right, that content is now going to be on the right hand side, even if you are trying to justify content to the start, right?
0:26:08
So remember justification affects this axis. I want my stuff justified to the start. Well the start normally means left, but when you flip the flow, the start now means the right, like what was previously the end. And so now if I wanted to go back to the beginning, I actually have to tell it to go to the end. Why? Because I’ve reversed the meaning of the axis, okay? So that’s another little bit of a confusing part about Flexbox and to introduce even more things. Again, people that are like, Flexbox is easier than Grid.
0:26:43
Okay, okay, whatever, whatever my friend. Stop gaslighting me, how about that? Stop gaslighting me. All right, so watch this. Instead of writing flex start, I can just write start. And then what this will do, notice it’s still 3, 2, 1, right? Row reverse. It reversed the children. I can reverse the children without reversing the flow of the axis itself by writing start instead of flex start. Isn’t that convenient? Right? Who would have known? Right, who would have known? So you’ve got this shorthand called start that will Basically freeze the axis, but still reverse the children. Okay, and it will do the same thing when you use Column reverse. Okay. So here’s our column Content reverse so it’s still going three two one If I just put column it goes one two three see that so column reverse and why is, why did the boxes not go to the end? Because I’m only using start. If I had used flex start, it would reverse the flow of that axis, and all the children would be at the end now. Okay. You need to get into the playground.
0:27:56
You need to get into the playground and play on the playground, and then you will understand things better. Okay? All right, so that’s row reverse and column reverse. You also have wrap reverse, my friends, okay? So, and again, this is only gonna take effect when you have enough children to actually wrap. So I’m gonna add our other children back and we will do four, five, and six, cause this does something very, very interesting. So I’m gonna go back to row and I’m gonna go back to wrap.
0:28:28
And we’re going to see what happens here. Awesome. Align content. I want to be flex starts. That’s going to move all this up to the top. Okay, great. Fantastic. Now, instead of wrap, let’s wrap reverse it. And check this out. Our flow going on is crazy.
0:28:46
Let’s go back to start here. Perfect. So I just want things to stay at the top of the box, let’s not go insane. All right, so look at this, 4, 5, 6, 1, 2, 3, that’s interesting. It didn’t go 4, it didn’t go 6, 5, 4, 3, 2, 1, which you might expect. So it’s changing, it basically took 1, 2, and 3 and put them here in order, but on the bottom row, right? So it made them last. It kept four, five, and six in order, but it made them first. Okay, this is wrap reverse. So it’s another type of reversing or reordering content. All right, let’s get rid of our wrap reverse. Let’s go back to wrap.
0:29:30
All right, save. And then all these are going to return to their original order. Okay, let’s look at what is next on the list. We looked at reversing the flow, starting in versus flex start flex end, we talked about multi-line content alignment. Let’s get into talking about children now. Because children in a flex container can behave independently of what the parent is telling them to do. The child can basically go off and say, nah, not listening to you today. I’m getting that extra snack, you know what I’m saying? So here’s what that looks. Sorry, I have a little bit of aggression from being a parent and you know, children not listening sometimes. You guys are my therapist in a way. So what we really need here to visualize this is we need a way to target one of these children and see it visually different. Okay. So first thing, because having two rows is going to complicate things a little bit, I’m going to go back to just having three children. So three children is all we’re going to have.
0:30:26
And then I’m going to target one of them with a class of target. Okay, I’m going to come down here and now I can say flex child with a class of target. And let’s just talk about that for a second. You see that I have joined the class with the other element. You can write CSS like this, or you can write CSS like this. It is very important to know the difference. Okay, what this says is I want to find a element with the class of target that is a child of this element right here. Well that does not exist on this page right. So flex child target I’m going to say background color of dark red and you’re going to see nothing change. Okay, but watch this the minute I take that space away, you’re gonna see that target child show up.
0:31:18
Why? Because what this means is, find an element called flex child with a class of target, right? So both of these have to be true. Is it a flex child? And does it have a class of target? Then it’s gonna get this styling. What this was saying, once again, just to show you the distinction is, is there a flex child?
0:31:41
Does it have another child of its own with a class of target? Then we’re going to color that child dark red. Again, that doesn’t exist anywhere in this HTML. But there is a flex child with a class of target like that, and thus that’s going to get the styling. Again, I want you to understand these basic CSS concepts, so that you know what you’re looking at and you know what you’re doing in CSS land. Now let’s manipulate this singular child, this target child right here. The first thing you need to know is that you can make children, one child or all children, grow to fill available space in a container, which is very, very important. You’re going to see this used a lot.
0:32:26
And we use the flex grow property of one to make a child grow. Now flex grow works along the main axis. So it’s going to grow across the main axis. I am going to set this back to zero and you’re going to see that it’s going to turn off basically and by the way, there’s any value in between as well. Think of it as a ratio. So for example, if I wanted to take up half of the available space, I can actually put a 0.5 and it’s going to grow a little bit. It’s going to grow halfway to the end of the container. Okay, so it’ll auto calculate and things like that, which is can be very, very, very fantastic. There’s also something else called flex shrink. I’m not going to cover flex shrink. It’s used a lot less than flex grow. And I don’t want to overload you too much. Like I didn’t remember I said, this isn’t going to cover every every single detail of Flexbox. There’s also a shorthand property called Flex1, which will basically make it grow as well. That combines FlexBasis, FlexShrink, and FlexGrow all into one shorthand property. Okay, so let’s leave it on Flex1 here for right now. And then let’s ask another question. Okay, I got it to stretch that way across the main axis using flex grow. I’ll put this back to flex grow just so you can see that. What if I wanted to stretch this way and take up all that available spaces? Clearly there’s a lot of room down here that we’re not using and I want this children, this one child to stretch all the way across. I don’t want all my children to stretch all the way across. We already saw up here if I want them all to stretch I go to the parent and I tell all the children align items, not flex stretch, just stretch. And now they will all stretch. But the question was, can I do that with just one item, right? So I’ll do flex start.
0:34:13
And again, I have no wrap on here. And I’m not using align content anymore. Remember this, when we were wrapping content, that align content comes into play. This will destroy some of what you’re able to do with flex children. If you have wrapping turned on and you’re using a line content, it will override a lot of these singular child controls. Which is once again, why you need to jump into the playground and play around with things and try to break things, and just try to manipulate it, and learn how the different things work, and what’s available to you, and what’s not available to you in certain situations.
0:34:50
So, remember we did align, item, stretch, got all those children to stretch? Well, I can do align self, and I can do stretch. So there’s this align self property on individual children to be able to decide how that child is gonna behave in contradiction to how the parent was asking all of the children to behave. So I can do align self flex end and what’s going to happen here it’s going to go all the way to the bottom just like in normal flex box align controls the cross axis. So the cross axis in this case is up and down so it’s going to move that to the end. I can do center move that child to the center of this box okay. So this align self gives you some really good control over individual items.
0:35:39
Flex grow, of course, can give you control over if that individual item stretches or does not stretch. All right. What else can we do with that item? We can change its order. So one child, I can say order. Now let me do zero, and you’re gonna see that nothing happens. So let me actually put this back to the beginning. Flex start.
0:36:01
Perfect. Now order zero does nothing, why? Because zero is the default order of all elements. All right? Negative one says go to the beginning because negative one is clearly less than zero, which is less than the value of all of the other elements by default. So it’s going to immediately jump to the beginning. Let’s talk about the last thing, which is flex basis.
0:36:21
And to talk about flex basis, what I’m gonna do is get rid of all of these this flex child target controls. Okay we’re back to where we started and then I’m going to use the universal selector. So the flex parent is going to select all direct children here and we’re going to say that the flex basis is a hundred percent. Okay and then we’re going to hit save and notice they all try to be a hundred percent. This is almost the same as doing width of 100 percent. Notice nothing is going to change. There are slight differences between width and flex basis. Okay, often I will try to stick with using flex basis instead of width. I’m going to go ahead and change the flex direction here to column and you’re going to notice this is one distinction of flex basis. Flex basis follows the main axis. Okay, so with a flex basis of 100% they were 100% wide.
0:37:24
Now they’re trying to be 100% tall. Whereas if that was a width instead of a flex basis, they would still be 100% width. Even though the axis changed to a vertical axis and now we’re getting some sort of weird overflow issue going on here. Like I said, there are slight differences in, you know, things that appear like, hey, remember when this was a row, some people might make a mistake and say with flex basis, those are the same thing with a hundred percent flex basis, a hundred percent. They’re the same, right? You’re talking like a caveman. Anyway, I, I digress. Let’s put this back on row and I just want you to see that you can use other things besides percentages. So you could do like, let’s see what two rem does here. So it’s going to squish them all to try to be two rem. On the horizontal axis, it behaves very much like width, right? But the minute I switch the axis to column, you’re going to see that it’s trying to make them 2 rem high, which is not really doing much of anything. So I’m going to go with 5 rem, 15 rem, now it’s actually controlling their height properly. If I did a height of 0, you see that that actually manipulates the box, right? So flex basis can have some great consequences, it can have some unintended consequences based on what you’re doing, width and height can have some good consequences, or some unintended consequences based on what you’re doing.
0:38:52
That’s really why it’s important to get in here and create a playground. Like I’ve tried to say many times now and actually play around and see if you can break things, see how things behave. So did you know what to expect when you are page building? But with all these powers combined, shout out to Captain Planet. No, with all these powers combined, you can actually justify and align content in all sorts of situations in your page building career. We used Flexbox here, we used Flexbox here. Where else did we use Flexbox? We can be using Flexbox within these grids to make sure that this content is always centered.
0:39:34
In fact, I did right there. You already see align items at the center on talking point cards. So we use Flexbox there and we scroll down. We’ve used Flexbox to center content, right? Like in this container, how did this content get centered? I’m gonna activate the class. There you go, align cross axis to the center. So we’ve used Flexbox throughout the sample build. Bottom line is, if you’re gonna do page building stuff, you’ve got to know how flex box works, just like you have to know how grid works.
0:40:07
There’s no way around this stuff. Okay. If you have any questions, we go back to camera. If you have any questions, definitely drop comments below. I am happy to help. But again, the best way you’re going to learn is by creating that little playground inside of something like CodePen and then just have at it, right?
0:40:23
Poke the box as we’ve talked about before and learn a bit on your own through trial and error and experimentation. Okay, you guys are doing a fantastic job. I love that you’re still here, still attentive, still commenting, still liking, still getting better and better every single day. I’m out. Peace.
