This course has been updated! We now recommend you take the CSS Grid & Flexbox for Responsive Layouts, v2 course.
Transcript from the "Code Demo: Questions & Answers" Lesson
[00:00:00]
>> Jen Kramer: Anybody have any questions at this point?
>> Speaker 2: What is the middle number of the shorthand?
>> Jen Kramer: What's the middle number of the shorthand? Grow-shrink, grow-shrink.
>> Jen Kramer: Or sorry, [LAUGH] woo, flex hyphens shrink, not grow-shrink. Grow is the first number, shrink's the second number, and flex-basis is the third number.
[00:00:24]
>> Speaker 2: And why do we never use the width property again?
>> Jen Kramer: Why don't we ever use the width property? Because the width property is an absolute value.
>> Speaker 3: Okay.
>> Jen Kramer: Even when we used so-called relative units that are adaptive, like percent or uPort, heights and widths, they really aren't.
[00:00:42] They're always 25%. The flex-basis could be larger or smaller as you see here. That box number five here, its flex-basis is set to 50%. Clearly, it's not that. Okay. So they are more flexible than a true width property.
>> Speaker 2: Does the grow actually kill the basis? It's like the basis doesn't work now, he's saying.
[00:01:06]
>> Jen Kramer: Yes, right, so the grow and the shrink definitely can kill the basis. Here's the same example, just using the grow property. So even though we said the basis was 50%, clearly box number 5 is not 50%.
>> Speaker 3: Do you have an example of how this would be used?
[00:01:23]
>> Jen Kramer: How this could be used?
>> Speaker 3: Yeah, like in-
>> Jen Kramer: Yes, those examples are coming soon.
>> Speaker 3: [LAUGH]
>> Jen Kramer: [LAUGH] That's like the whole rest of the day.
>> Speaker 3: Cool.
>> Jen Kramer: I'm not gonna get too much into. This is like the brainy theory stuff, and the next thing we're gonna do is we're gonna apply it.
[00:01:39] So are we good with questions on the Internet?
>> Speaker 2: People are asking what's the default grow value?
>> Jen Kramer: So the default values are zero for grow, one for shrink, and auto for the flex-basis. And again, if you take a look at your flexboxproperties.txt document, I've actually got that in there in those notes down towards the bottom.
[00:02:07]
>> Jen Kramer: Yes?
>> Speaker 3: I just had a question about the order of property.
>> Jen Kramer: Sure.
>> Speaker 3: If you changed a number, yeah, is it relevant and what is it gonna do?
>> Jen Kramer: So if we change the number for the order property, it's going to put these items in a different order basically.
[00:02:29]
>> Speaker 3: That's all it's gonna do?
>> Jen Kramer: That's basically all it's gonna do. And if you wanted to see more of an example of that, let's change these numbers to flex1, 2, 3, 4, that's probably enough, right? 5 and 6, then we could write styles for that. So I could say .flex6, let's say order of 1.
[00:02:58] When we hit Return a few times, you guys can continue to see what's going on here. And then if I said .flex3 was order of 2 and let's say flex4 has an order of let's say 10 because we don't even have 10 items, all right? Just to show you, you can have whatever number you want.
[00:03:29] And if we go ahead and we refresh the screen,
>> Jen Kramer: So it's harder, let's see. Let me take off the order here. I'm gonna remove order from flex2. So what we would expect to see is flex6 maybe towards the beginning, maybe flex3 immediately following that, and flex4 at the end.
[00:03:53] And if we refresh the page, so did I save my HTML?
>> Jen Kramer: No, always helps if you save your HTML first. Okay, so now it's gonna work just great. There we go. We're going one, two, five, six, three and four. So we're just changing the order around here.
[00:04:19] So you can imagine this being really applicable to a grid system where you wanna reorder boxes on the page. You write your HTML in the order that you actually want a search engine to read it, or the order that you want it to appear on a mobile design.
[00:04:32] And then using this order property, you can swap your boxes around so that things appear in exactly the order you want. Pretty awesome. Yes, Mark?
>> Speaker 2: Brandon's saying, well, flexbox isn't a grid system.
>> Jen Kramer: Correct.
>> Speaker 2: But isn't it fine for page layout?
>> Jen Kramer: but isn't it fine for page layout?
[00:04:51]
>> Speaker 2: Like sidebar fixed header, main content.
>> Jen Kramer: Yeah, technically, no. So again, grid is the correct way to lay out webpages. But obviously, as you know, grid support is still right on the edge. I'm gonna go through a whole lot of stuff with grid tomorrow including cross-browser compatibility issues.
[00:05:15] So ideally, in a perfect world, flexbox is really not used in a grid context. But I'm still gonna show you to do it today anyway, because it's out there and people are doing it.
>> Speaker 2: Mike has a question.
>> Jen Kramer: Yeah.
>> Speaker 2: So it's good practice to not use flex shorthand, but to write shrink and grow all out?
[00:05:38]
>> Jen Kramer: Okay.
>> Speaker 2: I don't know, I guess-
>> Jen Kramer: Okay, I don't know-
>> Speaker 2: It seems like a preference.
>> Jen Kramer: It seems to me to be a coding preference is to whether you'd write something out or you'd use the shorthand. Generally speaking, what I've seen online with most properties is that if the shorthand is available, a lot of people will use it.
[00:05:55] But, again, we have options, right?
>> Speaker 2: Can we set negative order values?
>> Jen Kramer: Negative order values, sure, let's give it a shot. So if we go here, let's set flex4 to a -10, so what would we expect to see if flex4 is a -10?
>> Speaker 2: The beginning probably.
[00:06:16]
>> Jen Kramer: Box number four may be at the beginning, okay. So let's do that and refresh the page. Sure enough, flexbox number four is at the very beginning of the order here. So yes, negative numbers are great.
>> Speaker 2: And the order starts with zero, right?
>> Jen Kramer: An order, I believe it actually starts with one.
[00:06:41]
>> Jen Kramer: Other questions?
>> Speaker 2: Why would the last box get the width 100%?
>> Jen Kramer: Why would the last box get the width 100%? Well, that just happens to be the way that we had set up this particular example. In that, previously, before I started making all these changes to this code, box number three and five had the class associated with them that set their flex-basis to 50%, okay?
[00:07:11] So they were next to each other, until I got the screen big enough that one jumped up to the previous row and the last one was left and it widened to take up the full width of that second row. That's what happened.