The Cover Design Pattern in Flexbox

he cover pattern is almost identical to the grid implementation, but just uses flexbox properties.

Project Source Code

Get the project source code below, and follow along with the lesson material.

Download Project Source Code

To 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.

Table of Contents

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.

This video is available to students only
Unlock This Course

Get unlimited access to Mastering CSS Layout, plus 70+ \newline books, guides and courses with the \newline Pro subscription.

Thumbnail for the \newline course Mastering CSS Layout

  • [00:00 - 00:03] Okay, welcome back everybody. We're going to talk about how to do the cover design pattern using Flexbox.

    [00:04 - 00:19] Luckily, we can bring most of what we already did with CSS grid version and bring that over. The biggest thing we need to do is display flex and flex direction column.

    [00:20 - 00:28] Very much like a stacking layout. And then we need to set the margin block to auto.

    [00:29 - 00:36] Now, what this does is it says the margin in the block direction. So the top and the bottom in this case is going to be auto.

    [00:37 - 00:47] Or in other words, use as much margin as you possibly can in between these two items. So that will effectively vertically center that inside of that component.

    [00:48 - 00:55] Let's exaggerate this a little just so you can see that in action. This hero component is not taking up 80 view heights.

    [00:56 - 01:07] And this is being centered inside of that. Now, the good thing with the Flexbox version is we can put some content above and we can put some content below.

    [01:08 - 01:21] And you can see that it still remains vertically centered much better than the CSS grid version that we had implemented. In this way, the flex box is it works a little bit more consistently than the CSS grid.

    [01:22 - 01:28] But let's go ahead and put this back to what it was. And there you go.

    [01:29 - 01:32] Have it. That's how to do the cover pattern using CSS Flexbox.

    [01:33 - 01:37] Okay. Let's go on to this next learning activity in this activity.

    [01:38 - 01:42] Don't worry about this section up here. It's already doing what I want it to do for you guys.

    [01:43 - 01:57] What I want you to do is focus on these cards. And what we want to do is go from this layout to this layout where we have everything lines up correctly with the content is centered in here.

    [01:58 - 02:08] And then as we go to new rows, we still get that centered content. Depending on no matter who has the largest content.

    [02:09 - 02:13] So we have this section. This define how large the content is for these.

    [02:14 - 02:19] I'm not going to tell you how to do it. I want you to pause, implement it yourself and then we can see how I did it.

    [02:20 - 02:23] Okay. So each one of these cards we're going to do is a data cover.

    [02:24 - 02:42] And then we're going to around the paragraphs, we're going to do data cover centered so that it knows this section is centered. And then the top and the bottom section will just automatically push to the top and bottom on their own.

    [02:43 - 02:49] So there we go. We've done a lineup of cards that will automatically center the content.

    [02:50 - 02:56] Depending on on its height. Let's go ahead and go to the next lesson and we'll learn about the next design pattern.