Original subtitles

Now that you know about the fundamentals

of Flexbox, let's finally start adding Flexbox

to our Blockpost 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 the heading on the left side.

And so, let's now go ahead

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 number, 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 the parent 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 NEF.

All right.

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'll 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 these two 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 side.

So this entire navigation.

So whenever we have just two flex items and we want to push

each of them to one side,

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 elements here

makes sense to become the flex container?

Well, let's check out our HTML, I'd 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 the parent of image and a paragraph,

but also of all these other elements.

So that's not really going to work, is it?

Let's actually try it out, post, header,

and set display to flex, but that should look very weird.

And indeed it does because now this here 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.

All right.

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 to get her 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.

All right.

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 this situation,

the margin is then kind of part of the element when it comes

to vertical centering.

All right.

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 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 LI 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 DLIS 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 here is what we want.

So on one side image, and on the other side, some bugs,

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 LIS a class of related posts.

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 posts,

right?

So related posts 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'll 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 hit enter.

And again,

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

All right, 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 sort of 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.

All right.

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 been 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 five 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 spacing.

So how could we do that?

Well, there are three different ways actually.

So we could select this image here,

then at some space to the right, we could select this box,

which contains these two.

So this div here 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 posts here,

remember it's 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 it.

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.

All right.

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.