Layout Modes

[00:00:00]
>> Kevin Powell: The box model and layout modes, we're getting into the fun stuff now. The things that actually creating layouts, but we already talked about the box model. So before we get to grid and flex though, I need to bring it up again, because I need to address something you don't hear about often in CSS which is layout modes. And layout modes involve the box model. Really quick refresher, we've already seen it, content-box, padding box, border-box, margin box.

[00:00:24]
It's pretty straightforward. Except it's not always straightforward. We saw an example where it's not, right, so not all boxes are created equal. We had this earlier. Wasn't this exact use case, but we were doing stuff with an element like this. If I declared a box with 1000 pixels, and we can even see down here, it's not 1000 pixels wide. Why isn't it 1000 pixels wide? Yep, right. Uh, span is display inline.

[00:00:51]
Yeah, we have a span there. We haven't changed it from being an inline element. We cannot apply a width to an inline element. So we have the box model, it sounds pretty straightforward, but suddenly, uh, it's not. Right? There's a property that doesn't behave the same way. We already looked also at how padding works a bit differently and margins don't work and it's strange. It's not only on inline elements, we're going to be getting into flexbox.

[00:01:18]
So in this example, these also have a width of 1000 pixels on them. They're definitely not always 1000 pixels. They could be smaller, potentially could be bigger maybe. Uh, they're squishy. It's kind of weird, but if flexbox didn't work that way, then it would be even worse. So it makes sense, but it's kind of strange at the same time that we have these properties and values that we thought worked, but now they work differently than what we learned traditionally, and it's a little bit of this mental switch that you have to make because when we first start learning CSS.

[00:01:48]
It's a declarative language, you tell it to do something and it does it. Color blue, background red, it does exactly what you just said. Then you say with 1000, and sometimes it is, which is kind of weird. And there's also. These things that we're doing, like when we're using flexbox, we're enabling new properties or we're going to be using positioning later, we're going to be getting new properties that are available to us, top, bottom, left and right, that aren't available to you if you haven't changed the position property to a new value.

[00:02:18]
That's also kind of weird that we're unlocking new abilities along the way. We even saw that with background images. Wouldn't make sense to do a background position on something without a background image on it, but it's, you know, it unlocks the ability to be able to control those things. And in a way I like thinking of it in a simple term of levers and dials. You have like a lever for your display property because you only can choose the certain values that are there.

[00:02:43]
Padding might be a dial that you're turning and it's changing how those things are working. But this concept of layout modes comes in where we have anytime we change the display property, so from display block to display inline, we're going to be seeing display grid, display flex, there's a few other display properties, or if you change the positioning, so position relative, position absolute, anytime we change either of those, we change the layout mode the browser's using to render that element.

[00:03:13]
And when I say layout mode, it just means it's a different algorithm that the users use, or not the user. It's a different algorithm that the browser is using to render what that looks like on the page. And so while we have these levers and dials, it's more like I switch to display flex. My control panel here goes away and a new control panel comes up somewhere else, and we're in a completely new context, and all of those things potentially could be working in a different way.

[00:03:41]
And this is where people get into this CSS is inconsistent, right? It doesn't make any sense. And it can definitely be frustrating when we've learned that a certain property works some way, and then all of a sudden you're like, oh, except now it doesn't work that way anymore. It feels weird, right? But if we know that changing those properties means that we're actually changing into a new layout mode, it can just help you have that switch of.

[00:04:05]
OK, this isn't working. It's probably because I'm in a grid context now. I've changed the display grid. Something's not working the way I thought. It's not because CSS is broken or something's really weird. It's, I don't understand how this one thing works when it's in grid, so I can look that up now and find it and you'll find your solution quickly. And most of the changes that happen are really logical, like the flexbox one I showed you.

[00:04:28]
If the width of 1000 pixels locked them in at 10,000, flexbox would be a lot more difficult to use. Same thing's going to happen with grid where things start changing a little bit and how they work. They're very logical changes, but it does mean that you have to just make that switch of, I'm in a new context, things are going to work a little bit differently, and it's going to make your life a lot easier.