Time to dive a bit deeper into
the layout of our flex items here.
And the first thing I would like to change
is the alignment of our two items,
because here the diff is on top of this box.
Whereas our nav bar here, is kind of in the middle,
as we have two elements inside of it.
So I would like to bring down the diff a bit
to be kind of in the center of these two elements.
And for this, we have a property,
we know already from this course, align-items.
And this also works here in a flexbox context
because of align-items center, we can quickly do this.
Now, these two items are on the same level, so to say.
Besides that, I don't like the way the space is used
in our entire header here.
Because normally we would like to have our
travel goals logo here, to the left of our page.
Whereas the two destinations and about elements
should be to the right here.
So these should actually be right here, to the right part
of our entire flex container.
We can achieve this with another property,
specifically used here in a flexbox context.
And this property is called justify-content,
you see lots of different options.
I just want to show you some of the core rules you will use
when working with flexbox.
And this would be space-between here.
If we do that,
then what is happening is that flexbox
checks the elements inside the flex container.
So here our div and the nav bar,
and we see that compared to the width
of the entire container, of 600 pixels,
there is some space that can be used to the right.
If I comment this out quickly, again,
you see I'm talking about this space here.
So what flexbox then does with
justify-content, space-between,
it says, okay, the first element should be here.
And then the space,
the remaining space,
should be added between the remaining elements we have.
So this means we will push this element to the right,
which is exactly the behavior we need for our purposes here,
to create this navigation bar.
With this, we achieved this goal.
We also have other options here, though.
For example, space-around,
with this, your remaining space will be divided
between the elements.
So we see we have a space here, there, and there.
That will be one option.
Another one would be space-evenly.
Just to give you a few examples here with that.
The remaining space that we had at the end
of our flex container, would be divided
well evenly between the gaps we have in our project.
Besides that, we also have other
values like center here,
with that the space would be added to the
left and to the right.
And two more values, which are flex-start,
so this will be the default case, and flex end,
which would push those two elements
towards the end of the container.
We'll stick with space-between though,
because that's what we need for our nav bar.
By the way, it's not required to remember
all these values or properties by heart.
I just want to show you the core properties and values
in this video here.
Attached to the last lecture of this module,
you can find a quick summary of all the flex properties
and values we have.
And what effect these have on the elements
in the flexbox context.
We've justified content,
we achieved some nice goals already.
We are coming closer towards a
navigation bar like look for our header.
But now the problem is our nav element itself.
So this element here, as you see the two links,
which will be linked in our project destinations and about,
are below each other and not next to each other.
And additionally,
these should be also well positioned
at the right of the page and not right here.
These are the next things, we'll have a look at.