-: All right, so let's now use all our Flex box knowledge
in order to build the overall page layout using flex Box.
And actually that shouldn't be too hard for us
at this point because the layout is actually quite simple.
So let's now make this a bit bigger again.
And so remember
that the layout we are trying to achieve is simply this.
So basically the header
and the footer are going to stay in place.
So they're already perfect right now.
And so all we need to do is to put
this article side by side with the related posts.
And these related posts
remember should have a width of 300 pixels.
And then we want a gap here in the middle of 75 pixels.
Now okay, so let's do that.
And again, what we need to do is basically only
put this element here side by side with this article.
And so once again, the first question to ask is
what is going to be or flex container?
So is it maybe the container element?
So the element with the class of container, Well
let's go to the top of the page.
Let's try that out,
display flex
and well it doesn't look like that was the correct solution.
So now everything here is kind of side by side
and that makes sense.
So the reason for that is that all of these
so the header, the article, the site and the footer
all of them are actually children of this container.
And so of course this is not our flex container
we are looking for.
Instead, what we will have to do is to create a new one.
So with flex box
many times it is necessary to create a new flex container
in order to achieve our layouts.
So remember in the last lecture, we actually
had to do the same thing here for each related post.
So we had to create a new div here
so that this div could then be side by side with the image.
So that's not the same situation actually
but we still had to create a new element
in order to achieve our layout.
So that's again, quite common using flex box.
But anyway, now we want to create a parent
for both the article and D aside.
So let's create a new div here.
So again, an element without a real meaning
and this one I'm gonna call it just row.
So a very generic name which we could reuse all
over the page if we want it.
So let's remove this one from here
and paste it after the end of the aside.
So here ends the article, then starts the aside.
And then after the aside and
before the footer is where we close the div
give it a safe, and then it re formats everything.
And so let's then go down here
to the end of our code and start building the layout.
So our row is now the flex container.
And so this is what it looks like.
And actually that already looks pretty good just like this.
So without having to do a lot of work, actually
now let's just inspect this site because it looks
like it already has a width, but well actually it doesn't.
So this is just a flex box automatic position
basically automatically trying to figure
out the perfect width for this element.
So apparently that's 281 pixels
but what we want it to be is 300 pixels.
So just like we did before when we did it
with floats, right?
So let's specify the width of the site.
And now remember that for flex items
we should not use the width property
but instead use the flex-basis.
So that would be flex-basis,
300 pixels.
Let's see if that works.
And it doesn't seem to work, right?
So it's still at 281.
And the reason for that must be is that flex box
like to automatically shrink these elements.
So we need to set flex shrink to zero, remember that
And we should actually do all
of that in the shorthand flex property anyway.
so just flex and then the first one, remember is flex Grow.
Let's check that out here.
And actually I will copy it here
because this can be a source of confusion,
okay?
So just formatting it here quickly
to make it look a bit better.
And so here the default of flex grow is zero
and we want to keep that.
And the default of flex shrink is one
but let's set that also to zero
to force it to be exactly 300 pixels wide.
And so maybe you saw that it grew.
And indeed, now we have our 300 pixels
now, right?
And now let's actually format the article as well.
So that's this other column basically.
And for now, let's do it in a similar way.
So setting these to zero
and then specifying exactly 825 pixels
just like we did before.
So that's going to be 825
plus a 75 pixels of space between them
and then plus the 300 pixels right here.
So let's do it like this for now
but we will change that a bit later.
Okay? And now let's add that gap here in between
so that space.
And so for that on the flex container
remember we can use the gap property.
So let's set that to 75 pixel just like before.
And so now our layout is basically done.
Let's check that out.
So 300 pixels and this one has or 825 pixels.
And so everything added together gives us or 1200 pixels
which is the width of the container.
Now, having to do all this math kind
of defeats the purpose of using flex box in the first place.
And so maybe we just want the site to be really this size
but then the article
maybe we can allow flex box to automatically figure
out its size, right?
So usually what we do in a situation
like this is to simply set flex to one
which will then automatically allow this element to
grow as much as it can in the available space.
And so if we give this a save
then our element should actually look exactly
the same as before, and indeed it does.
So it's still 825 pixels wide
because that is simply the space that is available for it.
And so well, that's then exactly the space that it can fill.
Okay? Now let's just figure out what happens down here.
And maybe you have noticed
that this site here grew all the way to the bottom.
So we will take a look at why that happens, but you also see
that it actually grew a bit more, so almost here to the end.
And the reason for that is
that this article has some margin here
which we also added way back.
And so one more time, this margin is kind
of part of the size of this element.
And so let's now actually remove that here.
So margin bottom zero,
okay?
And instead to create some space here
between the footer, this content
let's add that margin bottom to the entire row.
So to this container, right?
But what matters is that now this is
at least kind of aligned to this one, right?
So margin bottom of 60 pixels
nice.
And now let's think why actually this element
grew all the way until the bottom here.
So can you think why that is happening?
Well, the reason is that remember how the default value
for aligned items is stretch.
So basically if we don't define aligned items
then automatically all the elements will stretch as far
as they can.
And in this case, the largest element is this aside here
or actually this article, which we can see
if we add a color to it.
So background color,
red.
So you see that this element, of course, is way larger.
And so then by default, all other flex items grow as much
as they can in order to have the same size.
So you see they're perfectly aligned here at the bottom.
Now, many times, this is exactly the behavior that we want.
And before flex box with just float layouts, this kind
of layout was actually almost impossible to achieve
with CSS alone.
But now as you see, it's very easy.
It even happens by default right now in the situation
let's say we don't want that, and so let's fix it.
So how do we fix it?
Well, we simply set the aligned items
property on the parent to something else.
So on the flex container here
let's say align items and then set it to flex start.
And yeah, so now it's back
to only occupying vertically the space that is necessary
without growing as much as it can.
Great, that's amazing.
So with this, we finished applying Flex Box to our project.
And in this lecture in particular, we used almost all
of the things that we had already learned about Flex Box.
So that's amazing, and that's great, great progress
if you're still sticking with me here at this point.
And remember that flex box is a lot of stuff to take in.
And personally, it took me a lot
of time to actually learn all of it.
So it's really not a problem
if in your head things are still confusing.
At this point
-: All you need to do is to now start practicing Flex Box
on your own.
That is really key to make the material stick in your head.
And the first opportunity for that is actually
the coding challenge that is coming up in the next lecture.
So hopefully I see you there as soon as you can.