What is flexbox?
To understand this, attached to this lecture,
you can find a new mini project,
this project right here, as always,
download the code, open a new Visual Studio code window
and drag and drop the folder you can find
attached into Visual Studio code,
then you should see something like this here.
And if you closely look at the structure of this project,
you see that I recreated the structure we have
in our real course project.
So we have a header here, which contains a "div" with
a paragraph "Travel Goals", so this could be our page logo,
and we have a "nav" element here with an unordered list and
two list items, "Destinations", and "About",
here of course not added as links.
The problem we have at the moment is that we want
to position our "nav" element here next to the "div".
So this box here should go there,
and, positioning elements in CSS can be quite tricky,
but thankfully we have awesome built in technologies
like flexbox, which makes such things very easy,
as I said,
flexbox is no separate tool or something like that,
it can be used in CSS by default.
What is flexbox now though? Well flexbox,
flexible box, as the name indicates,
allows us to manage the space or the way elements
are aligned and positioned inside such a box.
Now, this sounds a bit strange,
but it shows you that we kind of need to define a box which
contains elements that should be positioned
or lay outed correctly.
And that's exactly the core concept behind flexbox.
We have to define a so-called flex container,
and this container, is the direct parent of the flex items.
So these are children of this container.
And by creating this flex container,
we can easily manage the layout of these flex items.
So this is the theory, i know it's a bit strange.
Let's apply this concept now to our project.
For this, I also repaired some styles in here. As you see,
these are just some well-known properties by us,
nothing new here.
It's just there to make this
look a bit more beautiful, at least.
And if we think about the structure I just mentioned,
so we need a container to manage the direct children.
So the so-called flex items with this flexbox logic.
Well then our header,
which turns out to have the ID container already,
would be the perfect example for that,
because this header here has two children,
two direct children, the "div" here.
So which contains the paragraph and the "nav" element,
which contains our list.
So these two elements should be positioned
next to each other. Therefore,
what do now is we go to our ID selector for the header.
So for the parent here, and add the display property,
which you know already,
but now we don't add block or inline or inland block.
Here we now add flex. And if we do this,
then suddenly the layout of our elements
inside our container changes.
Additionally, in the Chrome dev tools,
we have a nice addition here next to our container.
We have this flex button here as I would call it.
And if we click onto this button,
you see these dotted lines here.
These now indicate that we have a flex container,
which contains these two flex items here.
Now, the default way flexbox manages these items,
can be changed though, because now flex box decided
to position these next to each other,
which would not be typical for default block elements.
We have additional flex related properties,
which are now available. As we turn to parent here
into a flex container.
One property would be the flex direction.
Flex direction, as you see here,
has many different values that can be applied.
The default one is row.
So this means that we add this rule to our parent,
the header, and then the elements.
Again, the direct children of this container
will be added next to each other.
If we would change row to column,
then these elements would be positioned below each other.
So, column in the end, we could also use column reverse.
As we see it already here,
as a suggestion here in this code,
with this, we would change the order.
Now we have the "nav" bar ahead of the "div"
or instead of column reverse,
we also have row reverse,
this would put our "div" here towards the end.
So towards right here,
and then we would have the navigation bar.
Very important, this different alignment
also has implications on the way flexbox works.
By default, which would be row again.
We have a so-called main axis starting from the top left.
So this here left to right, would be the main axis.
The rest this here, top to bottom,
where we don't have any elements at the moment,
would be so-called cross axis.
So main left to right, cross top to bottom.
If we change the flex direction to row reverse here,
then the main axis,
so the starting point would be to the top right.
So we go from right to left and from top to bottom
with the cross axis. So main axis, cross axis.
If you would use column as a value here,
the main axis would go from, well, top left to the bottom.
The rest, the cross axis would go from the top left
to the right, so main axis, cross axis.
And if it would choose column reverse,
then, what would happen?
Well, the main axis would go from
the bottom left here to the top
and the cross axis would go from the bottom left here
to the right. These are some just generic terms
you will hear if you've worked with flexbox,
for our purpose here,
we can just stick to the normal flex direction of row,
which is, well, left to right for the main axis
and top to bottom for the cross axis.
Besides flex direction row,
we have another rule which is applied by default by adding
display flex rule to our container.
And this is the so-called flex wrap property,
which by default is set to nowrap.
This means if I decrease the width of our window,
nothing is happening here.
If I would change this to wrap and quickly comment out
the redefined width of our container,
then if I decrease the size,
you see it would break down our two elements
once the window is too small.
And just to show you this with nowrap,
even with the width commented out, this is not the case.
It would just, well stay in one line.
The default behavior here is nowrap.
So we can actually delete this rule and also flex direction
because row is also the default value here.
And we can comment back in our width as I would like to have
this fixed with fear for demonstration purposes.
With that, if I decrease the size, it will stay in one line,
but that's the behavior we want to have for
our "nav" bar either way. With that,
we learned our first core flex rules.
So the display flex rule to turn the container into
a flex container and to manage our flex items in here.
So the "div" and the navigation element,
we learned about the flex direction and the flex wrap.
And finally, one other property you will see in flexbox,
is the flex flow,
which is simply a combination of flex direction.
So row in our case, and the flex wrap,
nowrap for our project here.
So this will be the shortcut for flex direction
and flex wrap. As I said,
we are fine with the defaults here.
Therefore we'll stick with this example.
With that, it's time to dive a bit deeper into flexbox now,
because our demonstration "nav" bar here
doesn't look good at the moment.