So the theory was nice but let's now apply flexbox in our project. For that, I'm back on the starting
page
and I would like to start with the navigation bar actually,
so this part right here which is equal on all our pages.
So this means we have to go to our shared.css file,
so this one right here and now simply replace all the display inline block code that we have,
so for example this one right here in the main header, then we have display inline block right here
in the main header brand selector and we also got it right here in the main navigation items and so on
and we also got nice things like our width calculation right here.
So all these things should be deleted now and replaced with a flexbox solution. For that,
let's have a look at the code now in the developer tools and see how we can apply it
because always keep in mind, the structure that we want to follow is always the one that a parent element
should become a flex container
and with this flex container, we want to be able to define the behavior of the items inside this flex
container.
So let's start with the header now, this right here,
our main header class. Now inside this main header class,
we basically have two elements.
We have the div right here, this one which mainly contains our hamburger button which is not visible
right now but only the mobile view
and we have our anchor tag which includes our image right here.
So that's the first item,
the second item is our main nav class, so the navigation bar with these buttons right here.
Now, wouldn't it be a good starting point to turn this main header class into a flex container
and with that, get the control of these two elements in here?
I think it worked,
so let's go back to our code,
as I said, into the shared.css file
and let's now go to the main header right here,
so this selector. Now as I said, I want to turn this main header into a flex container,
therefore we first have to add display flex right here, like this.
If we do that and reload our page, we can see we have some change already up here,
not the perfect change yet but we'll do it step-by-step,
so let's see what exactly we have to improve. What we can see right here
as a first improvement definitely is that we have to align our items inside of the flex container along
the cross axis.
You remember, we applied display flex now,
this means our flex direction is row,
so from left to right, our main axis is also left to right, the cross axis
therefore is top to bottom and if we align our items along the cross axis, then these should be
centered.
Let's see if this works by adding, do you remember, align items right here and this should be center now.
Let's see if we reload the page,
yes this seems to work,
so that was the first step
now. Another thing that we could already apply is the following: if we consider the way our logo right
here and these buttons are displayed, then we see that there is some space between in here and if you
look at the structure, you have one element and another one,
so two flex items
and if we think back about our space between the value we used for align content in the last video,
then why don't we just use, not align content, but justify content now because remember, we want to position
the elements along the main axis, which in our case is this one,
so we need to use justify content and justify content right here would simply be space between, like
that. If we reload that though, we cannot see a lot of change for the moment because the code is not cleaned
up yet
but let's keep that for now and see if it works the way it should work because normally, we should have
this element, then the space between
and then the other elements which should actually follow the look of our navigation bar right here. With
that, let's have a look at the CSS code and see what else we have.
We have this main header div selector right here with display inline block and vertical align
middle,
so this basically targets the div right here which contains the button and our logo.
Now actually, we don't need that anymore because this is now a flex item,
so if we delete that, let's have a look, and reload the page, this looks fine,
let's go to the mobile view,
this also looks fine.
So for the moment, we don't have a problem,
this seems to work correctly.
So we already got rid of that code right here, of that main header div selector and we added flexbox
right here.
So that's a nice first step as I would say.
Now let's go through the code and see if we have additional display inline block declarations in here
and yes we have,
we have it right here for the main header brand selector.
Let's see, this is the anchor tag which contains the actual image in the end.
Now this anchor tag or these elements are basically part of this div flex item now,
so we should actually also be able to get rid of that code right here.
Let's see and reload the page
and now we have an issue because now the image uses 100% of the height of the parent element
basically
and this was the anchor tag
but as we remove this display inline block declaration from it, we cannot refer to this element anymore
and therefore, the 100% height is not correct anymore. But we can easily solve this by not adding
the height to the anchor tag, right here
but simply changing it right here for our actual image because if the image has now a height of 2.5rem
and if we load the page, we can see that it works fine now.
Because now we simply say that the image height should not refer to that anchor tag because that's
not possible but simply to the image itself and therefore, this looks alright actually.
So we got again rid of some code we don't need anymore,
let's also see if this works in the mobile view,
there we have a problem but let's see, we have the toggle button,
so this is this class right here which has vertical align middle applied.
So if we apply it now also to our image right here, middle like that and reload our page, then we can
see that this is now also aligned
and yes, I think this looks good actually.
Now with that, we also clean that up.
Let me quickly summarize what we did so far,
we basically turned our main header into a flex container and now we have these two items as flex items
and with that, we were also able to get rid of the display inline block declarations we had inside of these
items because the positioning now is controlled by the flex container
and with that, we could make our code really a lot leaner already.
So let's go down and let's see where else we have display
inline block, right here,
main nav item.
Let's see what that is,
main nav item is, no
these are the single items we have which are part of this unordered list right here
and if I look at this structure right now, I think we can easily improve that by also adding flexbox
right here because we know that main header is a flex container which contains the div and this main
nav class
but inside this main nav class, we could create another flex container, main nav items, the plural right here
which contains the single flex items right here,
so the packages, customers and start hosting buttons.
And if we do that, we could get rid of the inline block code and again, create another flexbox which will
make our code again leaner and easier to maintain and more efficient basically.
So how does this work?
Keep in mind, main nav items should be flex container,
the item, singular, should be the single items.
So we will delete the display inline block declaration from the item,
so from the single list items and now simply add display flex right here
to our main nav item selector.
If we do that and we load the page, we can see that this didn't crash it entirely but we have a problem
right here now,
let's find out what the problem is.
Yes,
the problem is of course down here now because we have our main nav selector right here which is a
media query and which then defines this calculation right here
and what should happen to the positioning of the entire main nav class.
So that's the main nav class
and here we have our flex container.
Now this should of course not happen right here because we define that positioning already with our
previous flexboxes we created.
So with that, we should actually be able to get rid of that entire code right here,
let me maybe first comment it out to see if it really works.
Let's see, if we reload the page, yes
now it disappeared,
let's see what happened right here,
yes.
We have display none right here of course for the mobile view,
so we have to add display
flex right here to our main nav, then we will turn that into another flex container
but that's not a problem because we basically have now this flex container, which has this flex item,
which is another flex container containing these items.
So that's not an issue,
you can nest these different flexboxes into each other,
that's not an issue and something that happens quite regularly.
However if I reload the page now, you can see a really cool thing because now we basically got our
structure back and even better,
we do not have this calculation anymore because what we basically have right now is we have this
flex container which contains this and this flex item. For these items, we added this code right here,
that's important, so we set justify content, space between, therefore the space between that we have between
these two items, can you see it? This is the second one, that's the first one, so we have the space.
So the space between will be filled and both will be pushed to the left and to the right
and therefore, this general structure works.
And then the main nav class itself is another flex container because with that, we can make sure it is displayed
and inside this flex container, we have the main nav items, flex item which itself is an another flex container
and which has these three flex items in it.
Now I know this can be a little bit overwhelming if you use it the first time
but take your time, click through the structure in the developer tools and think about what we learned
so far and how we applied it because in the end, it's really straightforward because the only thing we
do basically is, we apply display flex and align items and that's it basically.
And with that, we were able to now easily make our code a lot leaner.