All language subtitles for 057 Building a Simple Flexbox Layout.en_US

All right. So let's now use

all our Flexbox knowledge

in order to build the overall page layout

using Flexbox.

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

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 our 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

and let's try it 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 to your 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 Flexbox, 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 Flexbox.

But anyway, now we want to create

a parent for both the article and the aside.

So let's create a new div here.

So again, an element without a real meaning,

and this one I'm going to 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 save and then it reformats 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 there's this aside,

because it looks like it already has a width,

but well, actually it doesn't.

So does this just a Flexbox's

automatic position,

basically automatically trying

to figure out the perfect width for this element.

So apparently that's 281 pixels,

but what we wanted 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 aside.

And now remember that for flex items,

we should not use the width property,

but instead use the flex spaces.

So that would be flex spaces,

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 Flexbox like to automatically

shrink these elements.

So we need to set a 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.

And 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's the default

of flex grow is zero.

And we want to keep that

and 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 it that it grew.

And indeed now we have our 300 pixels.

All 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's 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 our 825 pixels.

And so everything added together

gives us our 1200 pixels,

which is the width of the container.

Now having to do all this math

kind of defeats the purpose

of using Flexbox in the first place.

And so maybe we just want the aside

to be really this size, but then the article,

maybe we can allow Flexbox

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 done 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 aside 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 and 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 a line

items is stretched?

So basically if we don't define a line 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'll 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 Flexbox, 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 this 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 align 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 Flexbox

to our project and in this lecture in particular,

we used almost all of the things

that we had already learned about Flexbox.

So that's amazing and that's

great, great progress.

If you're still sticking

with me here at this point.

And remember that Flexbox

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 Flexbox

on your own.

That is really key to make the materials

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.