Complete Intro to Web Development, v2 CSS Floats and Flexbox

Transcript from the "CSS Floats and Flexbox" Lesson

[00:00:00]
>> Brian Holt: So floats and flex.
>> Brian Holt: We talked a little bit about floats.
>> Brian Holt: Do I do it here?
>> Brian Holt: So yeah, we'll talk about floats here in just a second. What I wanna say is, for the rest of this page, we're gonna be talking a lot about how to get things to lay out, how to get them to stay in relation to each other the way that you want to.

[00:00:29] So the entire time I'm gonna be using three different boxes, box-1, box-2, and box-3. Box-1 is both tall and wide. Box-2 is just wide, and box-3 is just tall. So this is the CSS I used to make them. So just so you know, I'm gonna be reusing these boxes over and over again.

[00:00:51] This is where they're styled.
>> Brian Holt: So floats, they're the old, bullet-proof way of laying things out. If you need to support Windows XP, you're gonna be using floats. Also, I'm sorry. Internet Explorer 6 has literally taken years of my life [LAUGH]. I used to work at a company that worked on a website, and a good quarter of people browsing our website were from the State of Utah.

[00:01:22] [LAUGH] Bored state employees, and all of the computers, I think, for the State of Utah are still on Windows XP. So we had to support Windows XP, which means we have to support Internet Explorer 6. Now, if you're just getting into web development, you will hopefully never have to know the woes of supporting IE6, but it's hard.

[00:01:44] I never had to support IE5, which I'm told it was yet worse, but IE6 was pretty damn bad. No, you just have to deal with IE11, which has its own problems, just not necessarily as bad. It supports flex, so [LAUGH]. Okay, so floats. You would use floats typically when you could not use flex.

[00:02:08] This isn't totally true, there are still occasions where floats can be useful. Nonetheless,
>> Brian Holt: If I do .floated div, so all these divs in here.
>> Brian Holt: I guess I didn't talk about descendants, did I? I guess that bears mentioning for just a second. So this is all the divs inside of floated.

[00:02:34] Typically, I would not tell you to do this. Typically, I would tell you to select each one of these, I would maybe just give each one of these like box, box, box. If I was doing this for a real production website, this is what I would do instead.

[00:02:53]
>> Brian Holt: But,
>> Brian Holt: So if you put that space there, you're saying a descendant of this, right? So .floated .box is a box inside of floated.
>> Brian Holt: Do we follow, does it make sense?
>> Brian Holt: Now, if I even have boxes nested deeply inside, it doesn't matter how far the nest is, just any box that's in floated, or that's inside of any floated, any box that's inside of any floated, right?

[00:03:24] Cool.
>> Brian Holt: If you wanted to limit it to just the immediate descendants, so it has to be the first layer underneath there, you can use this little arrow, and that will stay only directly inside of it. So that is actually possible, but don't. These are called structural selectors, and there are a few of them.

[00:03:47] For the most part you want to steer clear of them. Because as soon as someone changes the structure of your HTML, all of your CSS breaks. That's a bad thing, so. Okay, so I have this blue floated right here, so this is box-1, it's blue. It floats to the left, right?

[00:04:11] So it pushes as far to the left as it possibly can. Then I have box-2, which is the red one. It pushes as far to the left as it possibly can. And then box-3 does not fit here on the right, so then it wraps to the next line, and it goes here, and it pushes against the blue one.

[00:04:26] And since it hits it there, it stops there, which is kind of curious, right? So it doesn't go down here, it actually goes here, right? Now, if I zoom out enough, you'll see here that it actually will, because it can still fit on that line, it's still trying to float left, it'll stay on that line.

[00:04:48] But if I zoom in further,
>> Brian Holt: Where am I? Okay, there we go.
>> Brian Holt: So now this one wraps cuz it doesn't fit, right? But what's curious is this number 3 one, this is one of the limitations of flow. You would think that this would just push up all the way up here, right?

[00:05:14] I thought it would, but it doesn't because it will never push up higher than a box that comes before it, right? So this is box-3, box-3 will never be higher than box-2. So that's why it stops here. Why? I don't know, it's the way it is. And in case you're wondering, if I make it even smaller,

[00:05:44]
>> Brian Holt: It just pushes to the next line.
>> Brian Holt: Make sense?
>> Brian Holt: Okay, cool.
>> Brian Holt: That should be enough for floats, you can also float right as well.
>> Brian Holt: Does the opposite.
>> Brian Holt: So let's get into display: flex then, which is fun stuff
>> Brian Holt: So a key thing to know about flex is, if I put display: flex on some element, when I set the properties, I am controlling all of the children of it.

[00:06:34] I'm not controlling that element itself, which is different from floating, right? I said, here, this box, right? I told that to float left, which means it was controlling itself and pushing itself to the left. When I'm doing flex, I'm then controlling everything inside of it, right? So you put display: flex on the parent container.

[00:06:55] That's a key thing, and we'll get there, and I'll show you. So I have flex-container right here, right?
>> Brian Holt: And here on flex-container, I'm saying display: flex. And right now all that's doing is just making everything lay out on the same line. But what's curious about this compared to float, notice that if I make this smaller,

[00:07:21]
>> Brian Holt: With display: flex, it squishes it rather. These even have width, right? Remember up top that we set widths on these? But with display: flex, I did not give it permission to wrap. Not like the hip-hop style. I also did not give it permission to rap that way.

[00:07:42] But in this particular case, it just squishes them proportionally. I could come up here and say,
>> Brian Holt: Flex-wrap, and wrap, and then it would, it would wrap at that point.
>> Brian Holt: But by default, it thinks like, no, you want to try to squish as much on the same line as possible.

[00:08:12]
>> Brian Holt: Which is pretty cool, I think, right?
>> Brian Holt: So now we're gonna mess with three things pretty extensively. I think, in my opinion, these are the most useful things from flex are flex-direction, justify-content and align-items. These are kinda the three that you toy around with. There are far more powerful things that you can do with display flex.

[00:08:35] And you should definitely watch Jen's course on it on Frontend Masters. I think she goes more into depth on some of these things. I'm giving you the 90% use, she will definitely teach you the 10% use as well.
>> Brian Holt: So flex-direction, something that you could not previously really do, I can tell it's like hey, reverse.

[00:09:00] So notice that 1 comes first, but it's also the furthest to the right. This was really difficult/impossible to do previously, but with flex you can just say yeah, reverse that, and it just works. It just blows my mind still to this day, super cool.
>> Brian Holt: Notice I'm still using flex-container, everything is still the same from what it was up here.

[00:09:24] So right now I'm just adding just flex-direction and it just reverses. So I'm trying to show to kinda isolate these things to show you them in a vacuum.
>> Brian Holt: Questions about any of this so far?
>> Brian Holt: Again, notice that I'm messing with the parent container, I'm not messing with the boxes at all.

[00:09:45] All of the boxes in all of these flex examples are exactly the same, I'm just messing with the parent container. That's a key thing to kinda keep in your head, with flex, you're messing with the parent.
>> Brian Holt: Okay?
>> Brian Holt: Now I can say, rather than go in backwards or in a row, I want you to go in a column, so I want you to go up and down.

[00:10:11] So you just say flex-direction: column, and it just goes in a column, and it just works.
>> Brian Holt: I think you can even do column-reverse, and you have 3, 2, 1. So that's also possible as well you, can just keep doing that. Again, really cool stuff that it was really difficult/impossible, in fact, this was impossible to do before, you could not do this with floats.

[00:10:44]
>> Brian Holt: So let's put this back to column.
>> Brian Holt: Yeah, column-reverse also works. So I think that that's it for flex-direction, I don't think there's really much else that you can do with it.
>> Brian Holt: So justify-content.
>> Brian Holt: Let me make this, I'm just gonna zoom out of this a little bit so you can see these a little bit more, otherwise it's hard to see.

[00:11:18] So justify-content right, I do justify-content: flex-end, and when I say flex-end, it moves everything as far to the right as possible. And that's what flex-end does, move everything to the right. As you might imagine flex-start it's everything to the left. But if you don't change anything, it's flex-start, so by default it's flex-start, which is why you don't typically see it.

[00:11:47]
>> Brian Holt: Okay, justify-content: center, as you might imagine, squishes everything into the middle. Now notice we're not doing anything vertically at all yet. And you can see this box here, this shows you that, this is how tall the element is right? Cuz it's as tall as number 3 is, but we're just moving things left and right, we're not moving anything up and down yet.

[00:12:10]
>> Brian Holt: So this is what justify-content: center does, it moves everything to the middle. I want you to be extremely grateful right now that this is how easy it is to center things. The goats I had to sacrifice [LAUGH] to get things to center previously, not proud of what I did.

[00:12:27] Just [LAUGH] yeah, it used to be, centering used to be an extremely difficult thing to do. And now with flex, it's just really simple, or I'll go with the more simple than it was before.
>> Brian Holt: So now if I wanna space things out evenly, where the left and the right are as far to the left and right as they possibly can, and then have equal space in between, you can do space-between, and that's what this does.

[00:12:59] So it will optimize to make these things as evenly spaced as it possibly can.
>> Brian Holt: And then space-around, what it's going to do is it's going to put space between the flex-start and the flex-end, as well as space between these things. So this is space-around, where the beginning and the end is half of these ones, does that makes sense?

[00:13:28] You can also do space-evenly, and then everything will be spaced literary evenly.
>> Brian Holt: I tend to use space-between more
>> Brian Holt: So again, that's left and right, not up and down. Now we gonna do align-items, which is up and down.
>> Brian Holt: So align-items,
>> Brian Holt: I don't know why,
>> Brian Holt: Needs to do that, should just be able to do that.

[00:14:08]
>> Brian Holt: Anyway, so flex-end, align-items; flex-end, that's moving everything from the top, it's actually gonna be at the bottom now. So this is all aligned against the bottom, it's not aligned against the top
>> Brian Holt: Again, previously this would have been an extremely difficult, and now it's just one property.

[00:14:28] Is just a align-items: flex-end, and everything just moves down to the bottom.
>> Brian Holt: It moves down to the bottom, right, notice that this container is as big as number 3, right? Cuz that's the tallest one, and it moves everything to the bottom of 3. So I could say here like,

[00:14:50]
>> Brian Holt: padding-top, 20 pixels, and notice everything continues moving down to the bottom as far as it could possibly go.
>> Brian Holt: So that make sense? Cool.
>> Brian Holt: align-item: center, so now this is going to vertically center it.
>> Brian Holt: So this one has equal space here to equal space there, equal space, equal space, right?

[00:15:22] And this one's up against the top and the bottom.
>> Brian Holt: Okay, align-items: stretch. This is the only one that I had to modify actually the boxes themselves. Cuz if you set a height, it will actually respect the height, and I wanted it to actually just stretch everything out.

[00:15:40] So if you say align-item: stretch, anything that doesn't have a height necessarily, it's going to stretch out to fit inside of that div, right? So this stretches from the top to the bottom, top to the bottom, top to the bottom
>> Brian Holt: So I had to set a height here of how much I want it to stretch.

[00:15:57] And if I set this to like 400, it'll be stretched even further. Really, really cool stuff that's really easy to change with just a couple of properties.
>> Brian Holt: Or,
>> Brian Holt: I mean, really just awesome stuff you could do here. If I said, get rid of that no-height thing, and I got rid of this height thing.

[00:16:28] So now this container doesn't actually have any sort of height set on the parent, but if I come in here and say box-3,
>> Brian Holt: And I set just the heights of box-3 to be 250 pixels.
>> Brian Holt: Yeah, I know I messed up a lot of things by doing that.

[00:16:51] Notice that it's stretched its sibling containers to match the height of the tallest element, which is awesome. It's really cool that you can just set one of the heights and all of them stretch to match that.
>> Brian Holt: You might be thinking, okay, cool, I don't care. It was so hard to do that before.

[00:17:17] [LAUGH] So, so hard. So I'm using the Cascade, like I told you not to. [LAUGH] And I'm telling it, hey, you previously had height set on you? First, ignore it. So it's saying that, you had something set on you, ignore it and just get whatever the parent, the ancestor height was previously.

[00:17:40]
>> Brian Holt: Make sense?
>> Speaker 2: I think that's the answer [INAUDIBLE].
>> Brian Holt: Either.
>> Speaker 2: Okay.
>> Brian Holt: So in this case I have up here box-1, box-2, and box-3, so their heights set way up there. I'm telling it to ignore those.
>> Speaker 2: Okay, and then whatever's after it to pick. Why did you do the inherit?

[00:18:02]
>> Brian Holt: Cuz if I do this then they're gonna have height, and so this stretch isn't gonna work.
>> Speaker 2: Okay.
>> Brian Holt: And that stretch is only gonna work when they don't have height set.
>> Speaker 2: Okay.
>> Brian Holt: Good question.
>> Speaker 3: And then I'm assuming, once we get further into it, instead of saying, height is 200 pixels, you'll be able to set it according to your device size, right?

[00:18:31] So you can do some sort of variable-
>> Brian Holt: Sure, you can say things like width 50%.
>> Speaker 2: Okay.
>> Brian Holt: Yeah, and that's actually probably what you're gonna use the most. I don't really talk too much about responsive web design in here, or responsive coding. That's the name of that technique, is making things fit screens.

[00:18:49] Cuz scrolling side to side on a phone is the great evil, [LAUGH] I don't like it. You do that using percentages and another thing called media queries, which are kind of an advanced feature of CSS worth investigation and understanding. You do have a responsive course, don't you?
>> Speaker 4: Yeah, the title of the course is Responsive Web Design with CSS Queries and Flexible Layouts.

[00:19:16]
>> Brian Holt: Cool, yeah, and Grid in particular is really, really cool. Cuz you can just basically set up these, you can make your page into a grid of things. And you say, okay, this takes up one unit, this takes up two units, and this takes up one unit, and it just kind of figures out all the spacing for you, which is really cool.

[00:19:35] So, yes, the answer to your question is yes. [LAUGH] Other questions? Great questions so far.
>> Brian Holt: Cool, so what I wanted to show you here is you can start combining these things to get really cool effects. So one that I will use quite often is, I'll have a div that's gonna be of a certain size.

[00:19:58] And I wanna make sure everything is horizontally centered and vertically centered, so I will justify center and align items center. And that just makes everything sit in the middle. If you remember at the top, you go up here to the top of the page.
>> Brian Holt: See how this Box 2 is sitting exactly in the middle of the div?

[00:20:19] The way that I did that, if you notice, display flex: align-item: center, justify-content: center, and that makes everything just be exactly in the middle of the box at all times. And what's nice about that, if I make this width 400, still centered. If I do height 400, still centered.

[00:20:39] If you want to make this width, let's say, 50%.
>> Brian Holt: That's too big, cuz there's margins around it, but lets say 40%. Everything is still totally centered, in terms of the Box 2 inside of it. So that's the trick for centering something inside of something, is display: flex, align-item: center, justify-content: center.

[00:21:08] You'll use that quite a bit.
>> Brian Holt: Cool, so yeah. This is align-item: center, reverse, and justify-content space around, it's what that looks like. Or if I do flex-container, align-items, flex-end, and column, looks like that, pushed up in the column on the right.
>> Brian Holt: So I'm teaching you a bunch of these individual properties in a vacuum, and the truth is you don't really use them in a vacuum too much.

[00:21:45] It's usually in conjunction with a bunch of these properties to achieve some effects that you're trying to sail, right? I don't know why you would make something look like that, but for some reason, some day, you're gonna have to, and that's how you do it, right? Is you combine all these things together to get everything pushed to the right and in a column.

[00:22:05]
>> Brian Holt: Questions?
>> Brian Holt: Cool.
>> Brian Holt: We talked a hot second about flex-wrap. Which is, right now if you have too many things on a line it squishes them together, and it starts squishing their widths. And if you wanted to say, no, if this is too wide, if I have too many things on this line, go down to the next line, that's flex-wrap, that's what that does.

[00:22:34]
>> Brian Holt: And then the last thing is, you can start doing crazy stuff with order. So everything I showed you right now goes on the container, at the container, the parent level. There's actually properties that you can do with,
>> Brian Holt: On the children themselves. So I wonder if I can just do this and show you.

[00:23:00]
>> Brian Holt: I'm gonna do it on this one, actually. So if I do another style here,
>> Brian Holt: And I do box-2, dangers of live coding. If I do box-2 and I say align-self: flex-end, I can actually individually move boxes. And I can even start messing with the order. I can say order: 5, and I moved that to the beginning.

[00:23:36] Whereas if I do a box-1 here,
>> Brian Holt: I can use order to move that 10, and that will move it to the beginning, so the higher ones are going to be ordered first. But if I do 1 then that's going to move it back, right? So now you have 2, then 1, then the 1 that's unordered.

[00:23:59] Again, this was totally impossible before, without flex and being able to set order on these things. And again, you could do align-self here as well, align-self: flex-start. So now this is in the bottom, this is on the top, and this one is technically in the middle.
>> Brian Holt: So crazy stuff, pretty cool stuff, anyway.

[00:24:28]
>> Brian Holt: I don't wanna get too much more into that. You can see this got really messed up. [LAUGH]
>> Brian Holt: The place to look on this, something I find myself constantly referring to is CSS Tricks, A Complete Guide to Flexbox. I was talking to the guy that writes this blog.

[00:24:50] This is by far their most popular page, literally ten times more than any other page. It's because there's a ton of stuff on here. It's impossible to keep all this stuff in your head, there's just too much that you can do with the Flexbox. So this page is a definitive reference for it, and it's all really clear to understand, which is what I like about it.

[00:25:11] So flex-direction's on here. I didn't even talk about flex-grow, that you can have things grow to take up their space, that's really interesting. You can tell, this one should be twice as big as the next one. You can give them kind of like ratios like that, which is really cool.

[00:25:26] There's some really, really cool stuff you can do with it. So become familiar with this page. They have one for Grid as well, which is quite good.