The Split Design Pattern in Flexbox

[00:00 - 01:53] Hey everybody and welcome to the next lesson. We're going to be talking about the split design pattern. So let's start off with our regular boilerplate. We've we've set our gutters and we set display flex. The next thing we need to do is we need to have a way to have this first child take up. Initially we're going to just do 50% and this other one be 50%. First of all, we're going to define the flex grow property for each of the direct children. And what this will say is I want you to grow at an equal amount. So we this one will grow as much as it can and this one will grow as much as it can. By default, it's still going to be based off the automatic size. So this one is already this big by default and this text can condense. So this image is going to continue to push against this text because it's natural. With is larger than 50%. So what we need to do is define the flex basis. That flex basis is going to be 50%. This says is each one of these children, I want them to have optimally, I want you to try to get 50% of that width in. And if you can't think, go ahead and shrink it if you can to meet it or if you can grow it, but try to get to this flex basis. So it starts with the optimal and it figures out whether it can grow to that optimal or not or shrink to the optimal . So that's why we set the flex grow property. And this works, even if we come in here and we go in our hero, we want to have a gutter. And we're going to say we want that to be 200 pixels.

[01:54 - 02:23] You can see that 200 pixel gutter is being put in between here. And yet each side is taking up exactly 50% and what's left because it's going to try to get to that 50%. But because that gutter is forcing it to go smaller, it will shrink it down. So that's what the flex basis property does. Let's go ahead and undo that change. The next thing we want to do is we want to define how that's what works for when we have our other fractions that we want to do.

[02:24 - 02:34] So with the magic of copy and paste, I'm going to go ahead and paste that in here. And we'll just define these because it's really easy because they all fall the same pattern.

[02:35 - 03:11] For the if we have the fraction one fourth, we're going to say the first child is going to have a basis of 25%. And the second child will have 75%. One third will be 33 and 67 . One half will still be that same thing. Fract reflects basis of 50%. And then the fraction two thirds is 33, 67, and so on. This allows us to come in. And if we want to go once again in the hero and say, hey, we want one fourth or we want three fourths, it's just going to automatically work.

[03:12 - 04:02] Let's move that back to one half. And you can see if we put in something invalid, like one seventh, it's going to default still back to 50% because we put that in as the default way everything works. So that's the split component. Now, we can take the split component because we 're using flexbox and take it one step further and do some intrinsic responsiveness. So as we move to larger and smaller screens, it will automatically adjust accordingly. That will be for the next lesson. But this is a basis for how to do the split component in a very simple way. Okay. So let's go ahead and do a learning activity. We have a form section and we want it to be split from the description.

[04:03 - 04:40] And we want it to look something like this. So go ahead, pause the video, implement it, and then we'll see what I did to make this work. So first of all, the outer section, we have that using a split. And then we have this section on the left here is implemented using a stack. And then the form section on the right is using a stack with each label also being a stack. In the next lesson, we're going to continue with the split, but we're going to add a little bit extra more complication to it to allow it to be more responsive. So I'll see you on the next lesson.