So time to work on the footer. For that, let's also inspect it right here to see if we can find a structure
we might already know.
Now this is the footer, inside the footer we have the nav, then we have a class and then we have an unordered
list with two list items.
Now we know the structure already,
right because what we can do now is, we can simply say that we will turn our main footer links class,
so this one right here into a flex container
and with that, we will be able to position our two flex items. For that,
we will go back to the code and go to the main footer links class,
where is it? Here
it is, to the main footer links class,
so this class right here.
Now as I said, I would like to turn this class into a flex container,
therefore we can delete again text align and now simply type display
flex right here, like that.
Additionally, as we see it right here, we can also delete the display block declaration from the
now flex items because, let me show you again, this will now be our flex container and these will be flex
items,
so display block should not be required here anymore,
let's delete that. If we now save that and reload the page, yes we can see that we kind of changed something
but it doesn't work perfectly at the moment because we are in the mobile view and actually support should
be displayed above
Terms of Use but we learn how to change this, right?
Because if we simply change the default value for the flex direction which is row to column, like that
and go back like this, then we can see that the items are now positioned below each other.
What we then have to do is, keep in mind the flex direction is now column,
so the main axis goes from top to bottom,
this means the cross axis goes from left to right,
so if we apply align items center, we would center our items along the cross axis and I think this would
also be a good improvement now.
So let's say align items center right here, like that and let's reload the page,
yes now this looks better.
What we can also see is that the distance between the two items increased because now that we applied
flexbox, you can see that the margin collapsing between these two items is not happening anymore but
we can easily fix that if we just decrease the margin from 1rem to 0.5rem, like that.
Let's see, if we reload the page,
yes,
now it looks the way it looked before, I think this is nicer with that closer gap between the two items.
And with that, we actually turned this footer into a flexbox or flex container, flex item construct.
The only thing we have to change of course is the desktop view now because as you can see, this simply
stays the way it is before because we have to change,
well what do we have to change actually?
Well, we simply have to go down right here
to our main footer link right here,
so that's basically the same links again and delete display inline block because that's not required
anymore as we have flex items. With that, let's see,
no change,
so not what we want but if we now scroll up again, right here to our main footer links, so the flex container,
I will just copy the entire container because that's faster to do and add it right here and now only keep
the flex direction
but this should now be row and important,
we can keep align items, that's not the problem but we also need justify content now
because with that, we can ensure that our items are well-positioned in the center of the footer and therefore,
this looks like that. So important to remember that, flex direction row simply means the main axis goes from
left to right
and the elements are positioned along this main axis,
then we use justify content to position the elements in the center of the flex container, like that
and with align items which we have right here, center, we make sure that our elements are positioned
in the center along the cross axis. And with that, we also turned our footer into a flexbox construct
as I would call it
and before we continue, let me quickly scroll through the code and see if we have to delete anything
right here
because maybe, yes this part right here, this commented out part, we can actually delete that, we don't need
it anymore because we know flexbox works now.
Let's see if we have anything else right here in our shared.css file,
no I think this looks good actually,
yes.
And with that, we can actually continue with the next lecture,
well we will have a look at your assignment in the flexbox module.