-: Alright. So let's now finish up our web app layout
and let's start by marking up these five buttons here.
So here we have another background color.
So let's immediately grab that here from the violet colors.
So this one is a bit darker.
Let's go actually with the darkest one here.
Okay.
And so right here inside of the menu
I will now replace this with some button elements.
So new
reply
forward
mark as unread
and finally
a trash button.
Nice. So let's put him here.
Give them some nice font size.
And of course that background color that we just copied.
Remember on the button, we always need to remove the border.
And we also always need to set a cursor to pointer.
So vs code actually already has this abbreviation here
because that is something that we do all the time.
Then also on buttons
the color does for some reason not get inherited.
So we need to set that manually.
Even though in the menu it is already white.
So we can actually remove that from here.
And to make them bigger, of course
let's give them some padding.
So 8 pixels and 12 pixels.
So let's take a look.
And here there are,
and they are centered
because these are like text elements, so inline elements
and therefore they are treated like text.
And since we have text align set to center everywhere
this also gets then centered inside
of this container.
Alright.
So let's just make them actually inline blocks
and make the text bolt.
Also font weight bolt.
And I like to use the display property first
for some reason, but you don't have to
Inline block.
Okay?
And now let's actually use flex box here.
So in order to give them some space between them.
And then I'm actually going to use this example to
show you yet another really cool flex box trick.
So the parent element of these buttons is this menu.
And so display set to flex.
Alright,
let's just check that out.
Alright, nice.
So we have our buttons here and we probably need to get rid
of this padding here in the top.
And then we also want to vertically align this, of course.
So that padding is here.
So let's remove that menu simply
and then align items, center,
and gap 12 pixels.
Okay,
nice.
Let's just add also some padding then
to the section here on the left and right side.
And then I finally want to show you something.
So that's, that's right here,
so note padding top and bottom,
and 40 pixels left and right.
Okay.
And now let's actually select the very
last button to give it that red color.
So since this buttons here are all button elements inside
of one parent container
we can use or less child pseudo class.
Right?
So button and then a different background color
just using red for now, but the actual color
well that doesn't really work.
Let's fix that in a second here.
I'm just going to get some nice pink color here
which match just beautifully with this one here.
Oh, of course.
Here, I actually forgot to write it.
So last child
and than that color.
Okay,
so that's red, and now it looks almost the same
but the difference is
that this very last element was moved all the way
to the right side.
So how can we do that?
I mean, there's not really a property that we can use
on a container to achieve this.
The closest we could get, but that's still far away
would be justified content space between.
So something like this.
So now we at least have the trash in the very end
but then the spacing between here is completely messed up.
So that's not what we want
but instead we want this one to move all the way
to the right side.
So now here comes the trick I was mentioning
and that trick is to set the margin here on this element.
So the left margin to auto.
So then that margin here will automatically
be calculated based well on the width of the container.
So of course if we then change this
then the margin here on the left side will change.
Okay?
And it would also work
by setting a margin right on this one.
But since we already have this one selected
I'm going to use margin left here.
Okay? So let's remove this one here.
And so,
margin left set to auto.
And there we go.
You see, you can actually see that.
So you see that it has a margin of 66 point 69 pixels
which is exactly the margin that is necessary to
put that element there.
And of course, if we change this
then the margin will be smaller.
Well, it looks like it's not somehow
let's just make it really small.
Well, that looks strange.
Actually, this is the margin, 248 pixels.
And you see that now it is getting bigger
and it is actually 863.
So actually 66 was not enough at all.
So that 66 point 69 is actually just a width of the element.
The margin is what we can see
down here in the actual box model diagram.
Okay?
But anyway, that works nicely, and this is a trick
that many people don't know and it is a very
important one that I actually use all the time.
Okay, But now about this part here
and this is also easier than it looks.
So let's quickly add 10 new boxes here
one for each email.
Okay?
And here I'm calling them email with a class.
So email one, and now I'll just copy it 10 times
Just a copy it like this.
And then
prettier will actually make it nice for us.
9 and 10.
Okay, so let's style them.
Okay,
so email
and let's again get some gray background color here.
Let's use this one
which is quite darker than the other one.
So the background color.
And let's get actually this here
also some padding of also 40 pixels
so that it's aligned with the buttons in the menu bar.
And let's give each of them some height.
So 96 pixels,
and that should already look quite good.
So here we are.
And now of course our layout did grow vertically
in order to make space for all of these elements here.
So by default, of course
they do not show this behavior with this grow bar
but instead they take up all of this space
and therefore this second row of the grid then needs to grow
in order to accommodate for that space.
Now, let's also actually create some spacing
between these elements.
And for that I want to use the gap property.
Remember how we can do that vertically?
So of course, remember that by default the gap
property applies horizontally like here, right?
But if we want to use it vertically
then we can still use flex box.
All we have to do is to change the flex direction
from row to column.
So we did that before in this section, I think even twice.
And so if you don't remember that
I even did a very nice visual representation of that change.
And so maybe you can find that
in one of the first lectures in this section.
But anyway, the flex container
of these email items here is of course the section.
And so let's make this a flex container
and then we want the gap property of 40 pixels.
And just as a review
let's see what happens if we do not specify flex direction.
So then of course, they are side by side like this
and with the gap applied horizontally.
And so now as I was saying, what we need to
do is to change this to column.
And nice, that looks nice.
Let's just center the text here also inside of each email
because with that, we can practice some more flex box.
And remember that this works basically
because flex box treats texts as a flex item.
Okay?
And so we can use align item center
and justify content center.
So this we have done many times.
So hopefully these three lines
of flex box are already nicely inside of your brain.
Alright?
And so now it is time
for the trick where we want this element here
to not grow larger than the content.
Alright?
So by default, of course, this element here
so this container element head simply the size
of this grid row
but then we put all of these elements into it
and so then it grew bigger to accommodate
for all that content
but we can make it so that it does not grow.
So that's right here,
it's the section element.
And so we can say overflow and then set to scroll.
Okay?
Now this alone will not fix it
because since this is now a flex container
what this will do instead of giving us a scroll
bar is to basically shrink these flex items
because by default, flex shrink is set to one.
So again, by default
flex items are allowed to shrink if necessary.
Right?
But we can turn that off
by going to all of these flex items, and then in there
set flex shrink to zero.
But this one is of course
only necessary because we are using flex box.
If we were not using flex box
then this one here would be enough.
Okay?
So just keep that in mind.
This property has nothing to do with flex box.
Alright?
This has been in CSS for a long time.
Okay?
And so now we are back to, if I'm scrolling here
nothing happens because now this grid row here is back
to just being one fr.
So basically only occupying this space here.
And then here we made it so
that any content that overflowed would get some scroll bar.
Okay?
Now, here, instead of scroll, one
of the other things we use all the time is hidden.
And so in this case then the content that was overflown
so that it overflow and did no longer
fit here simply disappears.
So now I'm scrolling here, but well
these other items are simply hidden.
Okay?
But in this case, that's not what we want.
Sometimes it is, but in this case, we want scroll.
Let me actually write that here.
So how elements that don't fit into container appear.
Okay, now we're back to scrolling.
And so now our nice little layout here is finished
and it looks quite nice.
So I'm really happy with this result
and I hope that you are too.
Alright.
And so right now at this point, we studied so much HTML
and so much CSS, things like Flex box and CSS Grid
but of course also all the other CSS properties
that we are now ready to start working
on our big and final project of this course.
Just make sure before you moved there, that you
did actually understand everything that we did here
because we will use most of the things or maybe even all
of the things that we learned until now in this big project.
But then once you're done reviewing everything
I can't wait to show you that project in the next section.