Presenter: Time to practice your new flexbox skills
in coding challenge number two of this section.
And once again,
here I already have to 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 flex box 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 see you back here.
Welcome back,
and I hope that you completed this challenge successfully.
And so, here is how I would've 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 mark-up 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 diff 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, diff, 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 all flex container.
So display flex,
and immediately they are in 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 petting on margin.
Ah yeah, indeed it is.
So here the shipping does have some, 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.
Now, right? Now, let's use flexbox on these
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.
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 these 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.
But let's just turn this off by using command
or control slash, and here I will remove the float.
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 widths 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 this one, 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 two to three,
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 clear fix here.
So, remember that this clear fix
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're still really confused about Flex Box
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.