The Inline-Cluster Design Pattern in Flexbox

[00:00 - 04:11] Welcome back everybody. We're now going to talk about the inline cluster pattern. I've gone ahead and pulled in All these same data that attribute Properties from the grid because they're exactly the same so we don't need to re-explain what they do because they work exactly the same But what we're going to do is go ahead and add the properties in effect. Let's go ahead and steal So these properties from the stack They're almost exactly the same the difference is we want to go back to the default of Having everything be in a row But then we need to add two other properties First of all we need to have the wrap property So now we just need to add two more properties to make this work The first is flex wrap How we're going to tell it to wrap This means that if it runs out of space in the inline direction It's going to try to wrap to a new row and we'll show that how that works in just a moment But the other one is we need to have the default be That we align everything vertically in the center. So by default We're going to center everything now, and then we can adjust that using our custom property values Right now you see we have these this all in line But if we were to run out of space in the inline direction Let's show that in action So you see here everything's working in line, but as we run out of space you see how that popped down there immediately and then it was again ran out of more space and it will keep doing that Now we can this is one way we can hand out. There's we can also go into this header and if we want to maybe Mess around with things a little bit. We have this inline cluster. Let's say we want to have that be justify Center now Doesn't look like it's changed here, but as we move to these smaller screens you'll see that Instead of clustering to the left is going to cluster to the center And that's exactly what happens down here with this section right here is as we Go to these smaller screens. This is going to cluster in In a centered way That is the in line cluster Let's go ahead and undo that change So that's the in line cluster So that's how to implement the inline cluster Functionality in CSS flow Xbox and once again the CSS flex box allows us to get the full capabilities of the inline cluster pattern Where in contrast to CSS grid only allowed us to do the inline part, but not the clustering Okay, let's go ahead and practice what we've learned we have this menu here and we want it to function like this and So we it's a little bit more complex in the last menu we have Three different sections that we want separated from each other and then we also want it to be responsive so that as we Go to lower screen size that we're going to get a good responsive layout that looks good on both desktop and mobile So go ahead and pause the video implement it and I'll see you and then we can look at how I implemented it Okay, so around this nav we have an inline cluster. We're doing space between our Middle navigation area we have as an inline cluster and we're going to justify that as center Which in as of this moment you don't see that in use But once we get to smaller screen size you can see that justify center in action And then we do another inline cluster around this button section So that's how to do a responsive menu using inline cluster let's go ahead and I'll see you on the next lesson. So I'll see you on the next lesson.