1
00:00:02,440 --> 00:00:10,270
So the theory was nice but let's now apply flexbox in our project. For that, I'm back on the starting

2
00:00:10,270 --> 00:00:10,990
page

3
00:00:10,990 --> 00:00:15,400
and I would like to start with the navigation bar actually,

4
00:00:15,430 --> 00:00:20,050
so this part right here which is equal on all our pages.

5
00:00:20,110 --> 00:00:23,730
So this means we have to go to our shared.css file,

6
00:00:23,740 --> 00:00:30,100
so this one right here and now simply replace all the display inline block code that we have,

7
00:00:30,100 --> 00:00:38,160
so for example this one right here in the main header, then we have display inline block right here

8
00:00:38,190 --> 00:00:44,060
in the main header brand selector and we also got it right here in the main navigation items and so on

9
00:00:44,200 --> 00:00:48,410
and we also got nice things like our width calculation right here.

10
00:00:48,460 --> 00:00:55,910
So all these things should be deleted now and replaced with a flexbox solution. For that,

11
00:00:55,930 --> 00:01:01,300
let's have a look at the code now in the developer tools and see how we can apply it

12
00:01:01,300 --> 00:01:08,050
because always keep in mind, the structure that we want to follow is always the one that a parent element

13
00:01:08,260 --> 00:01:10,520
should become a flex container

14
00:01:10,570 --> 00:01:17,140
and with this flex container, we want to be able to define the behavior of the items inside this flex

15
00:01:17,140 --> 00:01:17,920
container.

16
00:01:18,160 --> 00:01:21,050
So let's start with the header now, this right here,

17
00:01:21,130 --> 00:01:25,600
our main header class. Now inside this main header class,

18
00:01:25,600 --> 00:01:27,910
we basically have two elements.

19
00:01:27,910 --> 00:01:33,640
We have the div right here, this one which mainly contains our hamburger button which is not visible

20
00:01:33,640 --> 00:01:35,620
right now but only the mobile view

21
00:01:35,830 --> 00:01:39,450
and we have our anchor tag which includes our image right here.

22
00:01:39,640 --> 00:01:41,530
So that's the first item,

23
00:01:41,620 --> 00:01:48,020
the second item is our main nav class, so the navigation bar with these buttons right here.

24
00:01:48,430 --> 00:01:54,030
Now, wouldn't it be a good starting point to turn this main header class into a flex container

25
00:01:54,100 --> 00:01:58,180
and with that, get the control of these two elements in here?

26
00:01:58,180 --> 00:01:59,080
I think it worked,

27
00:01:59,290 --> 00:02:01,240
so let's go back to our code,

28
00:02:01,330 --> 00:02:03,530
as I said, into the shared.css file

29
00:02:04,120 --> 00:02:08,250
and let's now go to the main header right here,

30
00:02:08,350 --> 00:02:15,470
so this selector. Now as I said, I want to turn this main header into a flex container,

31
00:02:15,630 --> 00:02:20,520
therefore we first have to add display flex right here, like this.

32
00:02:20,520 --> 00:02:26,450
If we do that and reload our page, we can see we have some change already up here,

33
00:02:26,490 --> 00:02:29,660
not the perfect change yet but we'll do it step-by-step,

34
00:02:29,670 --> 00:02:34,040
so let's see what exactly we have to improve. What we can see right here

35
00:02:34,140 --> 00:02:40,680
as a first improvement definitely is that we have to align our items inside of the flex container along

36
00:02:40,680 --> 00:02:42,270
the cross axis.

37
00:02:42,280 --> 00:02:45,990
You remember, we applied display flex now,

38
00:02:46,380 --> 00:02:49,180
this means our flex direction is row,

39
00:02:49,260 --> 00:02:55,530
so from left to right, our main axis is also left to right, the cross axis

40
00:02:55,530 --> 00:03:01,230
therefore is top to bottom and if we align our items along the cross axis, then these should be

41
00:03:01,230 --> 00:03:02,300
centered.

42
00:03:02,310 --> 00:03:10,530
Let's see if this works by adding, do you remember, align items right here and this should be center now.

43
00:03:11,610 --> 00:03:13,580
Let's see if we reload the page,

44
00:03:13,860 --> 00:03:15,510
yes this seems to work,

45
00:03:15,510 --> 00:03:16,710
so that was the first step

46
00:03:16,710 --> 00:03:24,720
now. Another thing that we could already apply is the following: if we consider the way our logo right

47
00:03:24,720 --> 00:03:31,950
here and these buttons are displayed, then we see that there is some space between in here and if you

48
00:03:31,950 --> 00:03:35,010
look at the structure, you have one element and another one,

49
00:03:35,010 --> 00:03:36,450
so two flex items

50
00:03:36,750 --> 00:03:44,230
and if we think back about our space between the value we used for align content in the last video,

51
00:03:44,910 --> 00:03:52,980
then why don't we just use, not align content, but justify content now because remember, we want to position

52
00:03:52,980 --> 00:03:56,680
the elements along the main axis, which in our case is this one,

53
00:03:56,700 --> 00:04:04,020
so we need to use justify content and justify content right here would simply be space between, like

54
00:04:04,020 --> 00:04:11,520
that. If we reload that though, we cannot see a lot of change for the moment because the code is not cleaned

55
00:04:11,520 --> 00:04:12,080
up yet

56
00:04:12,180 --> 00:04:17,370
but let's keep that for now and see if it works the way it should work because normally, we should have

57
00:04:17,460 --> 00:04:19,760
this element, then the space between

58
00:04:19,800 --> 00:04:25,260
and then the other elements which should actually follow the look of our navigation bar right here. With

59
00:04:25,260 --> 00:04:29,670
that, let's have a look at the CSS code and see what else we have.

60
00:04:30,090 --> 00:04:36,230
We have this main header div selector right here with display inline block and vertical align

61
00:04:36,240 --> 00:04:36,840
middle,

62
00:04:36,990 --> 00:04:45,090
so this basically targets the div right here which contains the button and our logo.

63
00:04:45,120 --> 00:04:49,240
Now actually, we don't need that anymore because this is now a flex item,

64
00:04:49,260 --> 00:04:56,420
so if we delete that, let's have a look, and reload the page, this looks fine,

65
00:04:56,430 --> 00:04:58,110
let's go to the mobile view,

66
00:04:58,410 --> 00:04:59,850
this also looks fine.

67
00:05:00,030 --> 00:05:02,260
So for the moment, we don't have a problem,

68
00:05:02,280 --> 00:05:04,050
this seems to work correctly.

69
00:05:04,170 --> 00:05:10,330
So we already got rid of that code right here, of that main header div selector and we added flexbox

70
00:05:10,440 --> 00:05:11,270
right here.

71
00:05:11,460 --> 00:05:14,130
So that's a nice first step as I would say.

72
00:05:14,160 --> 00:05:21,580
Now let's go through the code and see if we have additional display inline block declarations in here

73
00:05:22,470 --> 00:05:23,850
and yes we have,

74
00:05:23,850 --> 00:05:27,120
we have it right here for the main header brand selector.

75
00:05:27,320 --> 00:05:34,720
Let's see, this is the anchor tag which contains the actual image in the end.

76
00:05:34,720 --> 00:05:41,440
Now this anchor tag or these elements are basically part of this div flex item now,

77
00:05:41,620 --> 00:05:46,790
so we should actually also be able to get rid of that code right here.

78
00:05:46,870 --> 00:05:50,760
Let's see and reload the page

79
00:05:50,930 --> 00:06:01,250
and now we have an issue because now the image uses 100% of the height of the parent element

80
00:06:01,250 --> 00:06:02,070
basically

81
00:06:02,240 --> 00:06:04,160
and this was the anchor tag

82
00:06:04,310 --> 00:06:12,450
but as we remove this display inline block declaration from it, we cannot refer to this element anymore

83
00:06:12,650 --> 00:06:20,180
and therefore, the 100% height is not correct anymore. But we can easily solve this by not adding

84
00:06:20,180 --> 00:06:22,870
the height to the anchor tag, right here

85
00:06:23,270 --> 00:06:30,020
but simply changing it right here for our actual image because if the image has now a height of 2.5rem

86
00:06:30,050 --> 00:06:34,510
and if we load the page, we can see that it works fine now.

87
00:06:34,730 --> 00:06:38,990
Because now we simply say that the image height should not refer to that anchor tag because that's

88
00:06:38,990 --> 00:06:43,890
not possible but simply to the image itself and therefore, this looks alright actually.

89
00:06:44,060 --> 00:06:47,940
So we got again rid of some code we don't need anymore,

90
00:06:48,470 --> 00:06:50,980
let's also see if this works in the mobile view,

91
00:06:52,140 --> 00:06:59,650
there we have a problem but let's see, we have the toggle button,

92
00:06:59,660 --> 00:07:03,840
so this is this class right here which has vertical align middle applied.

93
00:07:04,040 --> 00:07:14,840
So if we apply it now also to our image right here, middle like that and reload our page, then we can

94
00:07:14,840 --> 00:07:17,150
see that this is now also aligned

95
00:07:17,420 --> 00:07:21,020
and yes, I think this looks good actually.

96
00:07:22,310 --> 00:07:24,320
Now with that, we also clean that up.

97
00:07:24,410 --> 00:07:26,630
Let me quickly summarize what we did so far,

98
00:07:26,810 --> 00:07:35,940
we basically turned our main header into a flex container and now we have these two items as flex items

99
00:07:36,110 --> 00:07:41,150
and with that, we were also able to get rid of the display inline block declarations we had inside of these

100
00:07:41,150 --> 00:07:45,440
items because the positioning now is controlled by the flex container

101
00:07:45,680 --> 00:07:50,750
and with that, we could make our code really a lot leaner already.

102
00:07:50,780 --> 00:07:53,180
So let's go down and let's see where else we have display

103
00:07:53,180 --> 00:07:55,620
inline block, right here,

104
00:07:56,030 --> 00:07:57,860
main nav item.

105
00:07:57,920 --> 00:07:59,150
Let's see what that is,

106
00:07:59,250 --> 00:08:02,060
main nav item is, no

107
00:08:02,060 --> 00:08:07,320
these are the single items we have which are part of this unordered list right here

108
00:08:07,400 --> 00:08:13,680
and if I look at this structure right now, I think we can easily improve that by also adding flexbox

109
00:08:13,670 --> 00:08:20,540
right here because we know that main header is a flex container which contains the div and this main

110
00:08:20,540 --> 00:08:21,600
nav class

111
00:08:21,860 --> 00:08:28,640
but inside this main nav class, we could create another flex container, main nav items, the plural right here

112
00:08:29,090 --> 00:08:32,010
which contains the single flex items right here,

113
00:08:32,020 --> 00:08:34,840
so the packages, customers and start hosting buttons.

114
00:08:35,270 --> 00:08:40,910
And if we do that, we could get rid of the inline block code and again, create another flexbox which will

115
00:08:40,910 --> 00:08:45,440
make our code again leaner and easier to maintain and more efficient basically.

116
00:08:45,710 --> 00:08:46,660
So how does this work?

117
00:08:46,670 --> 00:08:50,200
Keep in mind, main nav items should be flex container,

118
00:08:50,250 --> 00:08:53,750
the item, singular, should be the single items.

119
00:08:53,960 --> 00:08:58,290
So we will delete the display inline block declaration from the item,

120
00:08:58,280 --> 00:09:04,000
so from the single list items and now simply add display flex right here

121
00:09:05,430 --> 00:09:09,920
to our main nav item selector.

122
00:09:10,070 --> 00:09:18,000
If we do that and we load the page, we can see that this didn't crash it entirely but we have a problem

123
00:09:18,000 --> 00:09:18,890
right here now,

124
00:09:19,140 --> 00:09:21,130
let's find out what the problem is.

125
00:09:22,060 --> 00:09:22,410
Yes,

126
00:09:22,560 --> 00:09:28,710
the problem is of course down here now because we have our main nav selector right here which is a

127
00:09:28,700 --> 00:09:32,510
media query and which then defines this calculation right here

128
00:09:32,520 --> 00:09:36,960
and what should happen to the positioning of the entire main nav class.

129
00:09:36,960 --> 00:09:38,410
So that's the main nav class

130
00:09:38,460 --> 00:09:40,340
and here we have our flex container.

131
00:09:40,380 --> 00:09:45,000
Now this should of course not happen right here because we define that positioning already with our

132
00:09:45,000 --> 00:09:47,700
previous flexboxes we created.

133
00:09:47,730 --> 00:09:53,720
So with that, we should actually be able to get rid of that entire code right here,

134
00:09:53,730 --> 00:09:57,580
let me maybe first comment it out to see if it really works.

135
00:09:57,600 --> 00:10:01,450
Let's see, if we reload the page, yes

136
00:10:01,490 --> 00:10:03,060
now it disappeared,

137
00:10:03,110 --> 00:10:05,090
let's see what happened right here,

138
00:10:06,590 --> 00:10:07,100
yes.

139
00:10:07,290 --> 00:10:09,810
We have display none right here of course for the mobile view,

140
00:10:09,900 --> 00:10:12,130
so we have to add display

141
00:10:12,210 --> 00:10:18,460
flex right here to our main nav, then we will turn that into another flex container

142
00:10:18,600 --> 00:10:24,090
but that's not a problem because we basically have now this flex container, which has this flex item,

143
00:10:24,360 --> 00:10:27,190
which is another flex container containing these items.

144
00:10:27,210 --> 00:10:28,200
So that's not an issue,

145
00:10:28,200 --> 00:10:31,410
you can nest these different flexboxes into each other,

146
00:10:31,410 --> 00:10:35,340
that's not an issue and something that happens quite regularly.

147
00:10:35,340 --> 00:10:42,710
However if I reload the page now, you can see a really cool thing because now we basically got our

148
00:10:42,830 --> 00:10:45,250
structure back and even better,

149
00:10:45,410 --> 00:10:51,500
we do not have this calculation anymore because what we basically have right now is we have this

150
00:10:51,650 --> 00:11:02,920
flex container which contains this and this flex item. For these items, we added this code right here,

151
00:11:03,100 --> 00:11:08,380
that's important, so we set justify content, space between, therefore the space between that we have between

152
00:11:08,770 --> 00:11:13,650
these two items, can you see it? This is the second one, that's the first one, so we have the space.

153
00:11:13,660 --> 00:11:17,670
So the space between will be filled and both will be pushed to the left and to the right

154
00:11:18,800 --> 00:11:20,990
and therefore, this general structure works.

155
00:11:21,140 --> 00:11:27,860
And then the main nav class itself is another flex container because with that, we can make sure it is displayed

156
00:11:28,050 --> 00:11:34,310
and inside this flex container, we have the main nav items, flex item which itself is an another flex container

157
00:11:34,450 --> 00:11:36,940
and which has these three flex items in it.

158
00:11:36,950 --> 00:11:40,690
Now I know this can be a little bit overwhelming if you use it the first time

159
00:11:40,880 --> 00:11:45,560
but take your time, click through the structure in the developer tools and think about what we learned

160
00:11:45,560 --> 00:11:50,480
so far and how we applied it because in the end, it's really straightforward because the only thing we

161
00:11:50,480 --> 00:11:55,700
do basically is, we apply display flex and align items and that's it basically.

162
00:11:55,730 --> 00:12:00,410
And with that, we were able to now easily make our code a lot leaner.