Use Flexbox to Responsively Layout Variable-Width Content
See how to use flexbox to layout variable-width content in columns, and take advantage of justify-content to keep flex children center-aligned on smaller viewports. We'll also learn how margin can be applied to resolve for lack of a well-supported gap property in flexbox. At the end of the lesson, we'll have styled both the "Subscribe" section and the site footer.
Stephanie Eckles: [0:00] The top portion of our landing page is looking great. Using the grid-related classes we've created, we can begin to improve the styling of the Subscribe section.
[0:09] Besides display-grid, we can also add our placecenter class to direct that all the section content should be centered vertically and horizontally. We also need the text-centering utility class. Then, we'll add the margin-top large class to provide some space between this content and the section above. Following that is our site footer. We'll also add the margin-top large class as well.
[0:37] The footer will be the main focus of this lesson. I'm going to comment out the rest of the page while we work on it. The layout outcome we want is to have the footer contents separated in two columns, which are centered within the footer and have some space between them.
[0:53] At first, this may sound like a job for grid. However, the rest of the requirements are that it should respect variable widths of each column, and as the viewport shrinks, any content that drops should remain centered. The ability of the dropped column to remain centered means we need to use flex.
[1:11] We'll first add the class of site-footer because this is not the only HTML footer on our landing page. Then we'll start our rule by first assigning a background color and some vertical padding. Then we'll add our display-flex class, which immediately gives us the columns we're after.
[1:29] We can then use our list-unstyled class on each of the lists to remove the default bullets. With that, the illusion of space between columns is also removed. Lack of a well-supported gap property in flex currently requires to determine a way to add margin.
[1:46] Let's create a display-flex modifier class called row-gap. We will then use the child combinator selector with the universal selector to begin a rule that will be applied to immediate children of any element type. Then we'll define the margin property with our unit value.
[2:07] After we add this class, we have almost no visual change due to the cascade and the margin being overridden by the utility applied to the list. This is a rare case where we need to use the ! Important flag.
[2:21] Let's open inspector to check out how flexbox handles margins. You may be familiar with margin-collapse. However, that only applies to block elements. Flexbox compounds margins. Although our unit is equal to 8 pixels, the visual result is 16 pixels between our columns.
[2:41] Next, it's time to create a new display class for another property that flexbox and grid share - justify-content. For flexbox, when using the default row alignment, this applies to the x or horizontal axis. We'll create the class justify-content center, and then apply it to the footer. Now the flex children are horizontally centered within the footer.
[3:06] If we size down the viewport, we find that we're missing one of our existing classes to allow the flex children to wrap. We'll add our existing modifier class of wrap. On save, if we size down, the last item drops when the horizontal space doesn't fully allow its width. Thanks to the justify-content center class, it also remains centered within its new virtual row.
[3:32] The links could use a bit of extra space, particularly to make them easier to correctly tap on mobile. In our site-footer class, we can add a rule that says that list items following another list item should have a top margin.
[3:46] Before we conclude this lesson, all of the display classes that we applied to the footer can also complete another part of our page. Let's uncomment the subscribe section that appears above the footer. On the form, we can drop the flex classes and justify-content class. We also need to apply our existing alignitems-center class, which will resolve the label's vertical alignment.
[4:11] In summary, we chose flexbox for the footer and subscribe form due to wanting to achieve a variable-width column layout that retains center alignment once the viewport sized caused items to wrap. It was necessary to create a rule to apply a margin on the flex children due to currently missing support for gap in flexbox.