Instructor: Now that you know about
the fundamentals of Flexbox,
let's finally start adding Flexbox to our blog post project.
Okay.
So let's go back here
to our project,
and give it a better width.
And so this is the layout that we built before using floats
and we also did a lot of other stuff using floats
like putting this text here side by side with the image
and also here putting this navigation
on the right side and heading on the left side.
And so,
let's now go at and disable all of this
so that we can now do the same thing
but using Flexbox.
Okay.
So now we are back
to what it looked like before using floats.
And,
so again, let's now fix this once again.
Okay. And we'll start here
with the navigation at the heading.
So putting these once again, side by side.
So the way we did it before was to float
both the 'h1' and the 'nav'.
but now of course we will use Flexbox.
And so where do we actually need to use Flexbox?
Or in other words,
what element should be the flex container here?
Well, it needs to be the element
that is apparent of both of these, right?
And so that is the main header.
So the element which has this main header class.
Right?
So just to make sure,
let's quickly check that out in the mark up here.
And so indeed the main header is the parent
of both the 'h1' and the 'nav'.
Alright. And so let's make this the flex container
by setting display to flex.
So this will already put them side by side.
And so now let's fix here the vertical alignment.
Now there's just one thing that we need to do.
So you see that all of these links here,
they have a margin to the top of 10 pixels.
So this one here.
And so we want to remove that now
and we actually want to remove that forever.
So let's do that, not here, which is for the Flexbox part
but let's do it
up there where we actually defined that.
So,
you see that our CSS is growing bigger and so
it's getting harder to find the code that we're looking for.
And so in a bigger project, we will
of course find a way of organizing this a little bit better.
So removing this and you see that it moved up now.
But again, we now want this to to be vertically aligned.
And do you remember how we do that?
Well, we just use
align-items
which by default aligns items vertically.
And so if we say center,
then automatically they move here to the center.
So that's great.
Very easy.
There is no way to manually add some padding
or some margin until it is centered.
So in this way it happens automatically
which is a lot better.
And now the next thing that we want to do is to
basically push this one here to the right site.
So this entire navigation
so whenever we have just two flex items
and we want to push each of them to one site,
then the perfect thing to do is to use justify-content.
So remember, justify-content is similar to align-items
but this one is to align items basically horizontally
by default.
So remember that we could set it to center as well
which would then look like this.
So now these two are in the very center of the header
but what we want is actually space between.
And so this will basically take all the empty space
and divide that as a space between them.
And in case we only have two elements
then that means that all the remaining space will stay
between the both of the flex items.
And so as a consequence of that,
each of them gets pushed to one of the sides.
Nice. So this one is fixed.
So let's move on to the next one, which is this part here.
So we want this text here to be back
side by side with the image, right?
So once again,
let's ask ourselves what should be the flex container
or in other words,
what parent element of these two element here
makes sense to become the flex container?
Well, let's check out our HTML.
And they like to do that now right here in the inspector.
So in the Dev tools, and I think it's a bit too small.
Again, let's make it bigger.
And so these two are the elements that we are interested in.
So image and P.
However,
the flex container should not really be this one, right?
I mean it is apparent of image and the paragraph
but also of all these other elements.
So that's not really going to work, is it?
Let's actually try that out,
.post-header
and set display to flex.
But that should look very weird,
and indeed it does.
Because now this year is the flex container,
and all of these are flex elements which are now placed
side by side at least if possible.
And so of course this is not what we want.
And so the solution is to create a new element
which will be the parent of the image and this paragraph.
Alright.
So that can just be a simple div
because we don't need any meaning for that.
So let's call this the 'author-box'.
And now let me use that trick
where I hit the option or alt key,
together with the arrow down key
to move down this div element.
So this closing tag.
And so this is an easy way
of wrapping two elements inside of a new parent element.
So this is the class author-box, which should now
become the flex container instead of post header.
Let's see.
And immediately they are side by side, so that's beautiful.
Now all we need to do is to once again
vertically center them.
And then we could also add some space here to the image
maybe to give ourselves some space here between these two.
So,
once again,
we are going to use align-items and set to center.
Alright.
Well that actually looks a bit strange
so it's not really centered,
and I think that's because there is some margin happening.
Yes, that's right.
And so in the situation, the margin is staying kind of
part of the element when it comes to vertical centering.
Alright,
so let's actually remove that margin
because it doesn't make much sense.
Then here I thought
that this image actually had some margin to the bottom
but maybe it does not.
Okay. But anyway, what we want to do is to permanently
remove the margin bottom from this one.
So let's select simply the author here,
and then let's override that.
So basically set it back to zero.
Okay.
So we have not selected this author class before,
so, let's just do that here.
So the margin at the bottom should be zero.
And then let's actually add a margin
to the left here to create that space between the image.
margin-left,
15 pixels,
and,
here we go.
Nice. Now let's just add some space
between this new author box that we created
and this element here.
So I'm adding another margin-left
of 15 pixels or actually margin bottom, of course.
Okay.
Beautiful.
And now it's actually finally time to
style this one here a little bit better.
So each of these,
elements here are kind of a mess right now.
Let's actually check out the markup
and we can do that here again, right here.
So we have the 'li's,
and all it does is to have an image
and the <a and the <p in there.
But what we really want is to have this anchor
and this paragraph side by side with the image.
So let me see.
Yeah, so this hear is what we want.
So on one side the image and on the other side
some box which then contains these two elements right here.
So let's add some classes here
to our markup so we can actually style it now finally.
So this entire UL is called 'related'.
So let's give each of the 'li' the class of 'related-post'.
So copying all of this and ideally we add these classes
right in the beginning
when we actually start writing our markup.
All right. So we don't just do it later
because that is a bit more work
because now we actually also should add some classes here
to these hyperlinks.
So the piece already have 'related-author'.
So let's call this one here, the 'related-link'.
So class="related-link"
and then add that to the other two.
And there we go.
Now going back here to our CSS,
the flex container should probably be the 'related-post'.
Right?
So 'related-post' and set display to 'flex'
and this is the one.
But now we have the problem where all of the three
are now flex items.
So you see this one
and this one and this one are all flex items
and that is not what we want.
So I think I mentioned it earlier
that we want these two here to be in the same box
so that that box can be on the right side of the image.
So I forgot to do that here.
So let's do it now.
So I'm just again wrapping it inside of a div.
Then here I had enter, and again,
I used option and arrow down to move it down
and give it a save.
And this one here doesn't really need any name.
We really just need this box so that
this box with this content can then be
at the right side of this image.
So again, the trick of moving down this div
so that closing tag and here the same,
well I should at least spell it right like this.
And if we check it out now,
then that finally looks right.
Okay.
And now,
we then need to also vertically align this once again.
Let's actually make this smaller again
so we can immediately see our results.
So at this point,
it should be easy to vertically align them, right?
So 'align-items: center'
Alright, nice.
But now once again, there is this problem
that one of these elements I guess still has an old margin.
So that is a problem that happens
when we start writing code first with floats, for example,
or just adding some random margins everywhere.
And only later we start refining the code.
So that's happening because we're still learning here
but in the future, all of this will become a bit easier.
So don't worry that this is all a mess.
So in this case, we still have this problem that
by default we assigned a 'margin-bottom' to the paragraphs.
So let's get this 'related-author' here and remove that.
So 'related-author',
and then let's say,
'margin-bottom',
and put it back to zero.
And since we're here, let's actually also style this.
So 'font-size' 14 pixels.
And many of the things that we need to do here
is to now kind of reset some of the things we did earlier.
So for example, for some reason this is bold,
so let's put it back to normal.
So 'font-weight' should be normal.
And now let's actually style all of these as italic
and,
let's wait for it.
Yeah, that looks quite nice already.
Let's quickly now style these links here actually.
And then once we're done with that
we will add some spacing here.
So,
let's do that here.
So 'related-link',
and then never forget that we need to
use the link pseudo class.
Alright.
So let's say 'font-size',
17 pixels.
There is a small bug.
Then here the font weight should be bold,
but the font style should be normal.
So again, in the very beginning of the course,
we wrote some style that made it
so that this very first element is bold,
and the last one is italic.
And so here we are just resetting that,
instead of going back all the way and fixing that code.
Okay, so that looks a bit better.
Let's just add some margin here
to the bottom of this anchor.
So 'margin-bottom', let's say 5 pixels.
And this is once again just to show you something
because this actually did not work.
So it looks exactly the same.
And can you guess why that is happening?
Well, the reason is that the anchor,
remember is an inline element
and therefore vertical spacing
like 'margin-bottom' and 'margin-top' do not apply.
So to fix that, let's simply display it
as a block,
and then this keeps jumping up.
But anyway, now we get our nice spacing, right?
And now just to finish, let's add that gap here.
So that's spacing.
So how could we do that?
Well, there are 3 different ways actually.
So we could select this image here
then add some space to the right.
We could select this box which contains these two,
so this div hear, and then add some space to the left.
Or we could use that other property
on the flex container that I showed you earlier
which is the gap property.
And that is personally my absolute favorite.
And so let's do that.
So the 'related-post' here, remember is the flex container,
and we can easily see that,
because that's the one who has display set to flex.
And then let's add a gap of 20 pixels,
and,
nice, there it is.
The only problem with the gap property
in Flexbox is that only the very latest versions
of Safari actually support them.
So on the Mac and on Safari, until a couple of weeks ago,
'gap' was actually not supported, but now it is.
And so we can maybe start using it,
especially if you are watching this in the far future.
Anyway, let's now also add some margin,
here to the bottom of 30 pixels
to add some space between these.
And we also then need to remove it from the last one.
So as usual, all of them get this.
Well, actually it doesn't.
So this has the 'margin-bottom', this and this doesn't.
So I guess we already wrote some style which did this.
So indeed, we somewhere selected all the list elements
and then the 'last-child'
we set 'margin-bottom' to zero.
Alright.
And so that fixed it then for us here
in this situation as well.
Okay.
And actually I think that's it
for transforming the smaller parts of the page to Flexbox.
So Flexbox is absolutely perfect
for these small component layouts that we just built here
and we will not replace these with CSS grid later.
So instead we will use Flexbox
and CSS grid together when the time comes.
But next, we will finally build the same layout
that we did before with floats, but with Flexbox.
So stay tuned for that one.