There are two main points to note about flexbox:
the first is that everyone uses flexbox. And second: you usually set flexbox properties
on an element’s PARENT — and less often on a child element itself. We’ll get into ALL of this in 6 parts: We’ll do flex alignment and justification,
we’ll talk about how flex children (like children in real life) can both override and
terrorize their parent elements, we’ll show how to use flexbox and auto margin to align
buttons in a pricing table, how to keep footers at the BOTTOM of a page, we’ll literally
fix HBOMax.com, and we’ll talk about how we can wrap items using flexbox. Let’s start with alignment and justification. Really basic here. Let’s use a Section as an example — just
a simple section. And we’ll set the height to 100vh. 100% of the viewport height. We’re doing this to demonstrate that when
we drag in a Heading from the Add panel, by default, it knocks to the top-left of the
Section. (This is expected behaviour). Now. We want to center this heading. Let’s go back to our list of two. We’ll use flex, and we’ll apply it to
the parent of the heading (let’s do that now). The heading’s parent is the Section (let’s
select the section). We just turn on flex, and we can align and
justify that heading to center. That’s IT. That’s centering things in flexbox. Here’s a CARD (just a div block with an
image, a heading, and a paragraph) — and it’s already in another Section. Top-left like everything in HTML by default. With the card selected, if we add flexbox? No good. We USED flexbox, but we
failed to select the card’s parent. Let's undo and instead let's select the SECTION element (the parent)
and turn flexbox on THERE. Align...justify. The child (the card) follows suit. So. What if we have multiple cards in a section? Same rules apply. Again, we select the PARENT, and because we
have flexbox here, these cards are horizontal). We could also do vertical. Back to horizontal? Back to horizontal. And with MULTIPLE objects, we have more control
over alignment, justification...we can even CHANGE the order in which things appear. NOW. Keep in mind that VISUAL changes in flexbox
don’t make their way over to screen readers — navigating a layout using something like
VoiceOver is going to follow the order of elements in the Navigator (our document order). But that’s it. People use flex. People usually set flex properties on the
parent. Let’s talk about when children DON’T follow
the rules. SAME layout here. But BECAUSE we already set flex on the parent
(because we’ve applied flex to the Section), selecting ANY of the CHILDREN unlocks even
more control. But there’s something to note here. If we start making CHANGE on the CHILD elements? Notice how it’s affecting ALL of them. That’s because the rules of CLASSES still
apply (all these cards have the same class applied). So... let’s undo...because if we only want
ONE of these cards (if we only want the LAST one to be affected), let’s make sure we
add a combo class (a more SPECIFIC selection to style the card we want to style). When we do? We can override those rules. And that includes things like manually setting
the order (maybe we want this one FIRST). So. We have FLEX which we set on the PARENT (in
this case the SECTION). And we USE the parent element to align and
justify its children. If we want, we can OVERRIDE the flex parent
on any of the flex children, of course, keeping in mind that we need to use a DIFFERENT class
(or a combo class) if we want to break the rules on only ONE flex child. But that’s children breaking the rules. Let’s do a pricing table. This is really straightforward. And the big aha moment for flexbox here
is you can USE it in conjunction with other layout tools. This...is CSS grid. It’s just three columns with a div block
inside each (those are our pricing cards) — but even though they’re equal height,
the buttons are all over the place. But if we select a pricing card (even though
it’s in a grid), we can set the cards (they’re all using the same class by the way) — we can set them
to FLEX. It’s horrible, so let’s fix that and stack
vertically. And what we’re really here for is this:
because the cards are flex, we can select a child element like the buttons here (same
class applied to all of our buttons), and we can push them down to the bottom. And to do this, we just set the top margin to
Auto. That...is it. Now. This works in a grid because by default, all
the pricing blocks stretch to fill the space inside each cell — but the magical
auto margin technique won’t work as expected if things aren’t an equal height to BEGIN
with (there’s lots of ways to do this, but a grid STRETCHING the children to fit... is
usually a safe bet for equal height layouts). Okay. Magical auto margin example 1 complete. Example 2: Here’s a design, there’s tons
of white space underneath...how do we get the footer to ALWAYS stay at the bottom. Well, same concept, but on a bigger scale. With the Body element on ANY page selected,
let’s go over and access our Body (all pages) tag. We’re showing two ways to get to this (on
the left is if you HAVEN’T added a class to the Body; on the right side is if you HAVE added a class to the body). But it all looks the same once we’re there. We’ll do two quick things: (1) let's set the tag
to flex. We'll use Flexbox. And: (2) we want sections and site content to stack
VERTICALLY. And... That’s it. And the magic part comes with auto margin. We can get out of editing the tag and do one...more...thing. On the footer, and setting the top margin...
to auto. And now it’s always going to be on the bottom. Even if there isn’t a lot of content on
the page. Magical auto margin example 2 complete. Let’s fix HBO Max. Because whenever we log in on a desktop computer,
this is what we see. Solid layout, it's clean design...but everything’s
sort of chunked over to the left. But it’d look SO much better if it was properly
aligned. And ONE way to do this is with flexbox. So. Let’s open CSS Preview (so we can see exactly
what we’re coding behind the scenes)... And for us? Are we going to rebuild the whole site? No. We’re just using a screenshot of the site. But the principle is exactly the same. It’s chunked over to the left. So...what do we do? Well. Everyone uses flexbox (check), something something
the parent element (let’s do that). Select the parent (that’s the body). Let’s go over to style it. Set the Body to flex. And we know we want any sections on the page
to stack vertically. But MOST importantly...we want to align to
the center. And all we do? Is just copy this code. Now. We could export this whole thing, but we’re
just going to use Sublime Text here to copy the CSS properties we need. Once we do? It’s time to fix HBO Max. Let’s right click, inspect. And we’ll do just two things: (1) we’ll
navigate to the div that’s chunked to the left, and turn off the left positioning. (No discernible effect...yet.) And 2? Since we KNOW we have to set flex on the body,
let’s select the body, go into our styles, and just...paste. And that’s it. HBO Max fixed. But we won’t stop there. Grimur:
Dear HBO, It’s Grimur again. I love the content on your platform. However, the layout chunks to the left on
larger displays. Here’s the code to fix that using flexbox. Sincerely, Grimur. Great work, Grimur. Let’s cover our final topic (this iswrapping) and we'll use
this basic tags layout. Right now this div block (we called it Tag
wrapper) — it has a defined height that's already set. And here’s the thing: if we set it to flex
(the parent of these tags), even if we align and justify things, they don’t fit quite as expected. So if we turn on wrapping? Now things WRAP using the available space
inside the parent element — and we have newly-unlocked controls to align our tags
however we want. And if the tags end up changing size? Maybe if we change the padding on both sides
of the tag? They’ll wrap perfectly when they hit the
inner boundary of the Tag wrapper. But that’s wrapping in flex. Now. Before we review, we often get the question
“when should we build with flexbox and when should we build with CSS grid?” (Because we used BOTH in one the pricing example.) “Which one’s better?” These are great questions, because we can
often use DIFFERENT tools to achieve the exact layout we’re looking to build. But what we did was create specific lessons
on Webflow University that COVER this, so if you’re getting familiar with flex and
grid...check out Flexbox vs. Grid, and of course, check out all the things you can BUILD
with Grid itself. But in THIS lesson, we covered alignment and
justification on a flex PARENT, we showed how flex CHILDREN can OVERRIDE their parents,
we used magical auto margin to push buttons to the bottom of a pricing layout, we used the
SAME technique to stick our footer to the BOTTOM of every page, we fixed HBOMax.com,
and we talked about how we can WRAP flex children to take up MULTIPLE lines inside a flex parent. And that’s an overview of using flexbox
to build for the web.
