11.3 Flexbox style options and shorthand - Video Tutorials & Practice Problems

<v Program User>Now that we've seen</v> some concrete examples of flexbox, we're going to take a moment to look at some more general aspects of how flexbox works, including flex container properties, and a shorthand notation that is commonly used in practice, but it's a little confusing for people who are just starting out, including me. So let's start with looking at some aspects of flex containers. What are the considerations here, Lee? <v Lee>We've seen a couple of these in the last sections.</v> So with the container, you can change the direction, like we did from horizontal to column, but you can also change the direction that new items get built on. And what do I mean by new items is, a new item would be like if you added a new element at the bottom of a page. <v Program User>Okay.</v> <v Lee>So like say you have a series</v> of flex items, and you add a new flex item at the bottom. You can actually change it, so that that bottom most item that's on the HTML page, actually comes first. <v Program User>Oh, I see.</v> So it's actually just a bunch of divs. <v Lee>Yeah. So you can reverse the direction with flex.</v> Which is actually really handy, when you're doing things for mobile or when you want to change like, the sorting of things. And you can do this all with CSS. You don't need like some fancy JavaScript stuff. <v Program User>Right. This is the kind of thing,</v> that before flexbox, you absolutely would've had to use JavaScript and like- <v Lee>Exactly.</v> <v Program User>Get your hands dirty</v> with programming and so on. And, but this, this is all just in CSS. <v Lee>Right, yeah. So you could just arbitrarily</v> change the direction of how the items get built on the page. And it's not actually changing the underlying HTML. That's the exact same. And then we already covered the vertical aligning, but that's another pretty commonly used style property. Having things be the height that they are, and then vertically aligning them within a flex container. <v Program User>Great. So I can see that flexbox really</v> is a huge step forward in terms of laying things out on the page. <v Lee>It really, a hundred percent, is.</v> <v Program User>Let's take a look at the properties too.</v> These three that we've been discussing. Actually, these are them. It's, it's good. Some review there. <v Lee>So 'Flex Item' has a lot of stuff.</v> <v Program User>Yeah. So I can see there's-</v> <v Lee>It's pretty vague.</v> <v Program User>I wanna zoom in here.</v> <v Lee>Yeah. This diagram from the text</v> has basically, just all of the options and how it works. <v Program User>All right.</v> So I'm not expected, necessarily, to understand everything on this at once, right? <v Lee>No, but if you wanted to you could come back</v> and reference this. <v Program User>Yeah.</v> <v Lee>Yeah, exactly.</v> Yeah. So for flex grow, like we mentioned, if you set flex grow to one for every item, then they all are the same size. <v Program User>Yeah.</v> <v Lee>But if you set one item to one,</v> and the other is to zero, like we did with our content,- <v Program User>Yeah.</v> <v Lee>Then the ones that are zero, which is the default,</v> so if you just don't even change anything about those,- <v Program User>Yeah.</v> <v Lee>Then only that one middle element will grow.</v> And that's what we use to push the footer down to the bottom. There was a trick you did, where you like dragged this into a safari window just to get the background just- <v Lee>Oh yeah.</v> (Lee laughs) <v Program User>Does it, will this work?</v> I'm learning stuff here as we go. <v Lee>There we go.</v> The last diagram on this first row shows the proportional nature of flex grow. So if you set two of them to one, and one of them to two, then flex is gonna make that one that is set to two two times as big as the ones. <v Program User>Okay.</v> <v Lee>And say you had a fourth one in there</v> that was set to two, then the two that were set to two would be the same size, and the ones that are set to one would be half the size of the twos. <v Program User>Got it.</v> Okay. So that was the flex grow property. We saw that here. <v Lee>Yeah.</v> <v Program User>Let's take a look.</v> We saw that with the content container, when we were doing things vertically, and then again, with the call out title. Here. And then in flex shrink, we saw again here, in this part. <v Lee>Right.</v> <v Program User>So that governed the behaviors.</v> We changed the size. <v Lee>Right.</v> It works like flex grow for this one. If you set it to one,- <v Program User>Yeah.</v> <v Lee>It's the opposite of flex grow,</v> where it will shrink. <v Program User>Okay. So if it's one by default.</v> Okay. So they all, I see, they all shrink equally, but if it's zero, then it doesn't shrink at all. <v Lee>Right.</v> <v Program User>Okay.</v> And, oh, I see. And so the two then, is like half the size. <v Lee>Right.</v> <v Program User>I got it.</v> Yeah. And then flex basis which we looked at,- <v Lee>Which is confusing,</v> <v Program User>Yeah.</v> <v Lee>But it's just,</v> it's kind of just a, either, it's one of two things. You're either setting the way that space is shared among the items, or you're saying, I want this one item to take up this amount of space, if possible. <v Program User>All right.</v> Now at the top, we've got a little property shorthand, so it's just flex colon. And then, the three attributes, flex grow, flex shrink, flex basis. <v Lee>Right. So in the same way</v> that margin has the ability to have top right, bottom left,- <v Program User>Right.</v> <v Lee>We can do flex with flex grow,</v> flex shrink and flex basis. <v Program User>Okay.</v> <v Lee>So we could change our content container,</v> and use the shorthand instead of what we used originally to push the footer down. <v Program User>Okay. So here is, so if it's flex grow,</v> now just to make things super concrete, I'm going to put in the default values for the other ones. So, this is flex grow, which is one. Flex shrink. Let's put them in the right order. So, flex shrink is one by default, right? <v Lee>Mm hm.</v> <v Program User>Just referring here to the diagram.</v> Flex shrink is one by default and then flex basis, by default is, take a look. I know you know it, but alright. It's auto by default. All right. So that's good. So this shouldn't change anything, right? <v Lee>Correct.</v> <v Program User>Okay. It seems like</v> the behavior is the same. <v Lee>And if you go to gallery it'll work the same there.</v> <v Program User>Yeah.</v> Right. Okay. And then using the shorthand, we can write this. Just wanna see again. Flex grow, flex shrink, flex basis. So, we've done the right order. So that's flex, one, one, auto. Is that right? <v Lee>Mm-hm.</v> <v Program User>All right. So that's these, just in order.</v> And then I can delete these, and it should be the same. Okay. And so I'm going to, now we can just comment it out. Yep. That's broken. Great. Yeah. So we're basically refactoring the CSS here. <v Lee>Exactly.</v> <v Program User>As a programmer, what I really want,</v> is like automated tests. I want a test suite, for the CSS. Does that, do people do that? Is that a thing? Not yet? <v Lee>Not yet. There's a problem in there,</v> where depending on how your site is set up, it might look like some styles are not being used, but something has to trigger them. Like if you use JavaScript to add a class to something, it's not gonna look like that class is being used, until something triggers that. <v Program User>Right.</v> So in addition to, like a CSS checker, you also need like a JavaScript checker, that goes through and like clicks on everything to fire all the, so it's a really complicated problem. <v Program User>Yeah. All right.</v> So let's go down to the other one. Remember, so we styled just the whole page here that specifically aimed at this space and the footer, but then we also have this, we just did a bunch of styling in here. So let's take a look at the call out copy, by the way, this thing that I'm doing here, while I'm just doing a search, this is how I navigate big documents. This isn't even that long. Right. It's like 300 lines or so, but that's my preferred way of just sort of getting around. <v Lee>It's much faster than scrolling.</v> <v Program User>Yeah. Yep.</v> So let's take a look at this. So flex basis and flex shrink. Okay. I'm gonna refer to this. So it's, so these are in the wrong order. Is that right? I mean, it doesn't matter, but I'm gonna put them in this order just for my own sanity's sake. And then flex grow is zero by default. So we can do this here. This is unnecessary, formally speaking, but this is the kind of thing I would do when I'm learning, which I am. So that's where I'm doing it. I also think it makes it a lot clearer. So here we've got flex grow zero, flex shrink zero, flex basis, 45ems. So I can do this. Flex, zero, zero, 45em. Just comment that out. So this shouldn't change at all. Right. That didn't prove anything, but certainly it's, it's a good first step. And then I can just delete this. Okay. Actually, I just want to double check this. 'Cause remember we were affecting the sizing as we move things around like this and resize the window. All right. It's looking good. Now let's take a look at call out title. You may have noticed that we skipped over it, and I'll explain that in just a moment, why we did that. But here we got flex grow, flex basis. And again, let's refer to our diagram here. So, flex grow, flex basis is the third one. So we need to insert the default, the flex shrink, to make the refactoring explicit to the flex shrink of one. It's here. All right, we got that. So then that's just flex one, one, zero. Should be the same behavior we saw before, it's looking good. But then there's an even shorter hand notation, so to speak, which is to replace this one, one, zero. If it happens to be these three values, with just flex one. Which is really confusing to me, Lee. Do you know where this comes from? Or is it just, that's just the way it is. <v Lee>I don't know.</v> I really honestly do not know where that came from. At some point, I guess they decided that was just gonna be the shorthand for the default behavior. <v Program User>Yeah. Is this, I mean,</v> is this basically the the most common combination,- <v Lee>It is.</v> <v ->Or is it actually all three?</v> <v Program User>The defaults, is it? So, default?</v> No, but one of them is auto, though. <v Lee>Right.</v> The default deflects basis is auto. That's, I guess, why I was confused by it. <v Lee>So, this is common,</v> in that by setting the basis to zero, if you go back to the diagram. <v Program User>Yeah.</v> <v Lee>You're forcing all the containers</v> to take up the same amount of space. <v Program User>Mm-hm.</v> <v Lee>And I guess</v> that's just the most common usage of it. 'Cause if you think about having columns you'd want the columns to be the same width. If you use flex basis auto for that, it would change some of the columns, depending on the content that was inside? <v Program User>Yeah.</v> <v Lee>Like the width of them, you can see,</v> 'cause it's only caring about the white space between. <v Program User>Right. No, that makes sense.</v> Although, one wonders then why they didn't make zero the default, kind of strange, but in any case. That's the way it is. <v Lee>There it is. Yeah. Oh it's, I know why</v> they didn't make zero the default. It's because auto actually works the way that an HTML container normally would. <v Program User>Ah that does make sense.</v> <v Lee>Because HTML elements just wrapped</v> to the content that's inside. <v Program User>Okay. So they wanted to preserve</v> the default behavior of HTML for backwards compatibility, probably. <v Lee>Yeah.</v> <v Program User>That makes sense.</v> All right. So let's refresh this. It should be behaving the same way. All right. So this is much shorter. You can see that now we've got this more compact way, writing things. And even though it it might seem a little bit more confusing, as we've seen with other examples, like with margin and things like border, this is a really common convention in CSS. So it's important not only when making your own TSS, but also when breeding other people's styling to be able to understand this sort of shorthand notation. Is this the kind of thing, Lee, that gets better with practice? <v Lee>It is.</v> <v Program User>Gets easier?</v> 'Cause, I'm still confused by this. But I feel like I'm definitely getting the hang of it, now having edited the text, and now that we're going through it here. <v Lee>Yeah. It gets a lot easier.</v> The more that you use it, and some of the weird things with how basis is handled and all of that, you just start getting a feel for it. And you, you start thinking to yourself like, oh, you know I want these to be all exactly similarly sized columns. So I'm gonna use flex base as zero or, oh I want these to be the natural width of the items that are inside. And I want like one item to start at the bottom, and then you use 'align items' on the container and you just get used to these things and you just have to get a feel for them from actual practical use. Right? Yeah. <v Program User>All right. Well, so,</v> we've got a good foundation here though. And I think it's probably a good idea to refer to these diagrams as necessary. I'm sure that I will have to do that as I work on things for, you know, my own projects and so on, but this is a great start, and we've made a lot of progress in terms of the styling of the homepage and then the gallery here. But of course this page is still pretty primitive. So, over the course of the next two sections, through the end of this chapter, we're going to work on this gallery page, and we're going to fulfill this promise, that it's a three column page. And then we'll actually have a mock gallery that will give us some sense of what it will look like when completed.