The Stack Design Pattern in Flexbox

In this lesson, we will learn how to implement the stack pattern using Flexbox.

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:08] Welcome to a new module. And in this module, we're going to be re-implementing the entire website again, but this time using CSS Flexbox.

    [00:09 - 00:18] So we're going to start out in this lesson doing the stack pattern. So let's create our data attribute selector.

    [00:19 - 00:26] And we're going to do display flex. And what display flex will do is they'll immediately put everything in line.

    [00:27 - 00:42] So what we need to do then is tell it to switch from being in line or a row layout to a column layout. So we do this by going flex, diode, shin, column.

    [00:43 - 00:49] And now we have everything stacking, but we're now missing that gap. So we can once again just do that.

    [00:50 - 01:09] And you can see we're getting the gaps already and we can just go ahead and implement that same pattern that we were doing before, where we can define the gap externally with the custom property and for a good hygiene, let's initialize it with nothing. And there we go.

    [01:10 - 01:18] We have that same stacking property, just like before, this time using flexbox instead. Okay.

    [01:19 - 01:21] So let's implement what we've learned. You know the drill now.

    [01:22 - 01:31] We want this application to look like this. So go ahead and pause the video and implement it and then come back and we'll see how I implemented it.

    [01:32 - 01:36] Okay. So we have this content section and we put a stack of the outer wrapper.

    [01:37 - 01:46] And then we went ahead and for this unordered list, we did another stack. So I'll see you on the next lesson.