Original subtitles

Time to practice your new flexbox skills

in coding challenge number two of this section.

And once again,

here I already have the code from the last challenge,

which we will use as a starting point for this one.

And also as always,

you can find the link to this code

somewhere in this lecture.

All right.

So what we're going to do now is to basically replace floats

and do everything with flexbox.

So what I want you to do is to use flexbox here

in this situation.

Also, you can actually now use flexbox here.

So before we were using the trick

of using display as inline block,

but let's actually now change that to flexbox

so that you can practice a bit more.

And then finally,

I want you to build this entire layout here.

So these three elements putting them side-by-side,

using flexbox once again.

And in this case,

I actually don't want you to specify the width

or the flex spaces of...

let's see what it is.

So 243.

So remember that.

So again, right now, I don't want you to specify the width

or the flex spaces of these two columns here manually.

Instead, you should simply allow flexbox

to figure out the width of these two columns.

Okay.

So given everything that you have learned

over the last couple of videos,

I hope that you can have some fun solving this one

and so once you're done with that,

I'll see you back here.

Welcome back

and I hope that you completed this challenge successfully.

And so here is how I would have done it.

So starting here with this price

and the free shipping label,

as always the first question is,

what element should be the flex container?

Well, let's see in our markup here.

So here is the price and the shipping.

And right now,

I think we don't have any suitable flex container, right?

Because we only want these two elements here

to be flex items,

but they do have a lot of siblings

that are also in this same div element here,

so in the same container.

And so what we need to do is to wrap these two

into a new container element,

So div class,

and let's call this one here, the product-price.

Okay.

And then after these two, we will close this.

Okay.

Let's copy our class name here

and then let's use that right here.

So first of all, let's undo the floating stuff here

and this one as well

and also this margin-top that we manually set.

Now, we no longer need to do that.

Right.

And then also we had a clear somewhere...

Ah yeah, right here.

So this one, we also no longer need.

And now this should be quite simple.

So product-price,

which is the element that contains these two here

should not become our flex container.

So display flex,

and immediately they are now side-by-side.

Then we want to push each of them to one of the sides.

Right.

And so for that,

we can use that trick that we also used for the heading

and the navigation in our website header.

And so that was to use justify-content

and then...

Space-between.

And there we go.

And now finally we need to also vertically align these two

because we removed those eight pixels that we had.

And so now, again let's do that automatically

using align-items set to center.

Well, something looks strange here.

Let's inspect that.

Maybe there is some padding or margin...

Ah yeah, indeed it is.

So here the shipping does have some margin at the bottom.

And so if we were to remove that, then it would look normal.

Right.

So now you see, here it makes sense.

And so let's remove that from our code

and put it maybe on this flex container.

So...

Yeah.

So right here, let's remove that from here.

And...

Put that right here.

Okay.

Beautiful.

So now it makes more sense.

And usually we don't run into this kind of problem

because usually, we simply code from scratch

and don't have to deal with the code

that we wrote before at some point.

All right.

Now let's use flexbox on this,

which should be even simpler.

So let's see.

So right here, color.

So color is actually,

I think each of these six elements

and so the flex container should be the parent of those.

So let's see what we have here.

Ah, here we have colors

and let's actually call them product-colors,

so just like all the other elements.

So we have product-price, product-description,

let's call this...

product-colors.

Let's grab that here.

And so to start, let's actually remove this right here.

So they are back to being block elements

and therefore occupying an entire line.

But now we set the parent to flex

and so these are now flex items and they are side-by-side.

All right.

Also we can improve this even more

because now we can remove this margin-right

from each of the elements

and instead use the gap property.

So with that, we then have the definition

of how the layout looks like all in the flex container,

which makes our code a bit easier to reason about.

So 10 pixels.

And there we go.

Great.

Now all we have to do is to apply flexbox also

to this layout, so the layout of these three columns.

So...

Right now each of them has a certain width

that we manually defined and it has float.

Well let's just turn this off

by using command or control slash,

then here I will remove the floats

and the same in this other container,

which...

is called...

product-details.

Let's remove all of that here.

And so now it looks, of course, very weird

and we still have a float on the image.

So let's remove that as well.

Yes, right here.

And so now we lost basically all layout that we had,

but it is of course easy to put that back.

So remember that we created in the last lecture

or actually in the last challenge,

we created this container element, right?

And it is this container here,

which contains both the image and the product-info column,

so this here and also the product-details.

And so this makes sense to be our flex container, right?

So display flex

and...

There we go.

So now these elements are back to being side-by-side

and all we need to do now is

to give these two an equal width.

So again, before we did that manually

by defining this value here.

But now since we're using flexbox,

let's do it in a better way.

And what I'm talking about is to specify flex

and set it to one on this one.

So basically it grows as much as it can,

but this only makes sense once we add the same to the other,

so the product-details.

So let's do that.

So again flex one,

and now since they have the same value,

they should be the exact same size.

And it looks like they are.

Let's inspect that.

And...

so we have the product-info, 243.5,

and this one also 243.5.

So exactly the same,

all thanks to the power of flexbox.

So without us having to go in

and manually calculate these width here,

which, remember, was kind of complicated

and a lot of unnecessary work.

All right.

So this is actually already finished now,

but let's make it even better.

So right now, we are defining these spaces here.

So basically in this one using margins

and we are doing that by setting margin-right

on the product-info and margin-right on the product-image.

But what if at some point we wanted to change that,

then we would have to go search for these properties

in all the elements and change them one by one.

So that's never a good thing to do

and so we can actually remove these from here.

So no more margin-right.

And the same here.

And we can then specify this gap,

so these 40 pixels right on the flex container.

So that's right here using the gap property once again.

And so this is really a lot cleaner and a lot nicer

and a lot easier for us to work with.

Now somehow this looks different.

So let's inspect once again here.

So this column looks smaller somehow.

So let's inspect and indeed it has 223

and this one is also now smaller.

So let's see what happens here.

And one nice trick we can use in the dev tools

to figure out what's going on with flexbox is

to hover the flexbox container and we can even click here

and it will then give us this nice overlay with the gaps

and also with our entire flex container and flex items.

Now what I'm seeing here is

that it created an additional gap here at the end,

where it is not supposed to be.

Now I'm seeing that this is happening

because there is this pseudo element here in the end.

And so therefore, flexbox sees this as an actual element

and therefore adds another gap,

even though in the end, usually we don't want it.

But again right now it is as if this pseudo element here

was actually the last element.

And so therefore, flexbox created another gap

between these two.

So that actually comes again

because of some older legacy code,

which is this clearfix here.

So remember that this clearfix introduces a pseudo element.

So we don't want that.

And...

Yeah, so now that's fixed.

We are back to normal.

And so with that, we are finished with this challenge.

And actually, we are also finished

with this introductory part to flexbox.

So moving on, we will start talking about CSS Grid.

But before you go there,

please make sure that you really, really understood flexbox

or at least these properties that I showed you

in these couple of lectures.

So if you are still really confused about flexbox,

you should not move on to CSS Grid

because then you will get even more confused.

Because they are a bit similar in a way,

so this will confuse you a lot

if you don't have the fundamentals of flexbox down yet.

So if that is the case,

then please try to come up with some own projects

and write some code on your own

to keep practicing these concepts.

I really can't stress enough how important it is

to not just move on

without fully understanding these fundamentals of flexbox.

Okay.

So I hope that made sense.

And then once you are actually ready for your next step,

then let's move on to the CSS Grid part of this section.