The Center Design Pattern in Flexbox
The center pattern sets the same margin properties, but the children is implemented using flex properties instead of grid.
Get the project source code below, and follow along with the lesson material.
Download Project Source CodeTo set up the project on your local machine, please follow the directions provided in the README.md file. If you run into any issues with running the project source code, then feel free to reach out to the author in the course's Discord channel.
This lesson preview is part of the Mastering CSS Layout course and can be unlocked immediately with a \newline Pro subscription or a single-time purchase. Already have access to this course? Log in here.
Get unlimited access to Mastering CSS Layout, plus 70+ \newline books, guides and courses with the \newline Pro subscription.
[00:00 - 00:42] Welcome back. We're now going to talk about how to implement the center design pattern. The good thing is most of what we've already implemented using CSS Grid, most of that wasn't even CSS Grid related. The only thing we have to change here is the center children. And so we can do that by coming in and going to display flex direction is going to be column and then the align items will be center. And there we have it. That's the only thing we need to change from the CSS Grid version to the CSS Flexbox version of the center design pattern.
[00:43 - 01:15] Otherwise, everything else works exactly the same as it did before. Okay, so let's implement a fold bleed layout. This is a common layout pattern that you're going to see out in the web . And there's different ways you can do it, but we're going to be focusing on center design pattern. So this is what it looks like without, but we want to look like this. So go ahead and pause the video, implement to yourself. And then let's go back and you'll see how I implemented it.
[01:16 - 01:46] This is how we did it. The everything in this article is a stack. So that makes sense. Everything stacked. And then each one of these sections of content, we're going to make it both a center and a stack block. We're making that a center and a stack. And then the last set of paragraphs are making that a center and a stack. And that's how we can get this kind of pop out effect that we're looking for. So let's go on to the next lesson.