1 00:00:02,220 --> 00:00:04,070 What is flexbox? 2 00:00:04,070 --> 00:00:06,500 To understand this, attached to this lecture, 3 00:00:06,500 --> 00:00:09,130 you can find a new mini project, 4 00:00:09,130 --> 00:00:11,410 this project right here, as always, 5 00:00:11,410 --> 00:00:15,140 download the code, open a new Visual Studio code window 6 00:00:15,140 --> 00:00:17,000 and drag and drop the folder you can find 7 00:00:17,000 --> 00:00:19,220 attached into Visual Studio code, 8 00:00:19,220 --> 00:00:21,480 then you should see something like this here. 9 00:00:21,480 --> 00:00:24,550 And if you closely look at the structure of this project, 10 00:00:24,550 --> 00:00:27,840 you see that I recreated the structure we have 11 00:00:27,840 --> 00:00:29,900 in our real course project. 12 00:00:29,900 --> 00:00:33,880 So we have a header here, which contains a "div" with 13 00:00:33,880 --> 00:00:37,570 a paragraph "Travel Goals", so this could be our page logo, 14 00:00:37,570 --> 00:00:41,460 and we have a "nav" element here with an unordered list and 15 00:00:41,460 --> 00:00:44,260 two list items, "Destinations", and "About", 16 00:00:44,260 --> 00:00:47,183 here of course not added as links. 17 00:00:48,090 --> 00:00:50,550 The problem we have at the moment is that we want 18 00:00:50,550 --> 00:00:55,260 to position our "nav" element here next to the "div". 19 00:00:55,260 --> 00:00:58,120 So this box here should go there, 20 00:00:58,120 --> 00:01:03,120 and, positioning elements in CSS can be quite tricky, 21 00:01:03,800 --> 00:01:07,600 but thankfully we have awesome built in technologies 22 00:01:07,600 --> 00:01:10,950 like flexbox, which makes such things very easy, 23 00:01:10,950 --> 00:01:11,783 as I said, 24 00:01:11,783 --> 00:01:14,720 flexbox is no separate tool or something like that, 25 00:01:14,720 --> 00:01:18,830 it can be used in CSS by default. 26 00:01:18,830 --> 00:01:22,140 What is flexbox now though? Well flexbox, 27 00:01:22,140 --> 00:01:24,830 flexible box, as the name indicates, 28 00:01:24,830 --> 00:01:29,330 allows us to manage the space or the way elements 29 00:01:29,330 --> 00:01:32,980 are aligned and positioned inside such a box. 30 00:01:32,980 --> 00:01:34,710 Now, this sounds a bit strange, 31 00:01:34,710 --> 00:01:39,140 but it shows you that we kind of need to define a box which 32 00:01:39,140 --> 00:01:41,870 contains elements that should be positioned 33 00:01:41,870 --> 00:01:44,150 or lay outed correctly. 34 00:01:44,150 --> 00:01:47,690 And that's exactly the core concept behind flexbox. 35 00:01:47,690 --> 00:01:51,080 We have to define a so-called flex container, 36 00:01:51,080 --> 00:01:56,080 and this container, is the direct parent of the flex items. 37 00:01:56,880 --> 00:01:59,580 So these are children of this container. 38 00:01:59,580 --> 00:02:01,600 And by creating this flex container, 39 00:02:01,600 --> 00:02:06,130 we can easily manage the layout of these flex items. 40 00:02:06,130 --> 00:02:08,930 So this is the theory, i know it's a bit strange. 41 00:02:08,930 --> 00:02:12,220 Let's apply this concept now to our project. 42 00:02:12,220 --> 00:02:16,490 For this, I also repaired some styles in here. As you see, 43 00:02:16,490 --> 00:02:19,580 these are just some well-known properties by us, 44 00:02:19,580 --> 00:02:20,610 nothing new here. 45 00:02:20,610 --> 00:02:21,690 It's just there to make this 46 00:02:21,690 --> 00:02:23,830 look a bit more beautiful, at least. 47 00:02:23,830 --> 00:02:26,900 And if we think about the structure I just mentioned, 48 00:02:26,900 --> 00:02:30,680 so we need a container to manage the direct children. 49 00:02:30,680 --> 00:02:34,530 So the so-called flex items with this flexbox logic. 50 00:02:34,530 --> 00:02:36,380 Well then our header, 51 00:02:36,380 --> 00:02:39,660 which turns out to have the ID container already, 52 00:02:39,660 --> 00:02:41,750 would be the perfect example for that, 53 00:02:41,750 --> 00:02:45,830 because this header here has two children, 54 00:02:45,830 --> 00:02:48,400 two direct children, the "div" here. 55 00:02:48,400 --> 00:02:51,890 So which contains the paragraph and the "nav" element, 56 00:02:51,890 --> 00:02:53,650 which contains our list. 57 00:02:53,650 --> 00:02:56,480 So these two elements should be positioned 58 00:02:56,480 --> 00:02:58,890 next to each other. Therefore, 59 00:02:58,890 --> 00:03:03,520 what do now is we go to our ID selector for the header. 60 00:03:03,520 --> 00:03:07,300 So for the parent here, and add the display property, 61 00:03:07,300 --> 00:03:08,700 which you know already, 62 00:03:08,700 --> 00:03:12,260 but now we don't add block or inline or inland block. 63 00:03:12,260 --> 00:03:16,308 Here we now add flex. And if we do this, 64 00:03:16,308 --> 00:03:20,280 then suddenly the layout of our elements 65 00:03:20,280 --> 00:03:23,750 inside our container changes. 66 00:03:23,750 --> 00:03:26,090 Additionally, in the Chrome dev tools, 67 00:03:26,090 --> 00:03:29,710 we have a nice addition here next to our container. 68 00:03:29,710 --> 00:03:32,820 We have this flex button here as I would call it. 69 00:03:32,820 --> 00:03:34,840 And if we click onto this button, 70 00:03:34,840 --> 00:03:36,990 you see these dotted lines here. 71 00:03:36,990 --> 00:03:40,150 These now indicate that we have a flex container, 72 00:03:40,150 --> 00:03:44,060 which contains these two flex items here. 73 00:03:44,060 --> 00:03:48,770 Now, the default way flexbox manages these items, 74 00:03:48,770 --> 00:03:51,980 can be changed though, because now flex box decided 75 00:03:51,980 --> 00:03:54,290 to position these next to each other, 76 00:03:54,290 --> 00:03:58,740 which would not be typical for default block elements. 77 00:03:58,740 --> 00:04:02,170 We have additional flex related properties, 78 00:04:02,170 --> 00:04:05,240 which are now available. As we turn to parent here 79 00:04:05,240 --> 00:04:07,690 into a flex container. 80 00:04:07,690 --> 00:04:11,400 One property would be the flex direction. 81 00:04:11,400 --> 00:04:13,340 Flex direction, as you see here, 82 00:04:13,340 --> 00:04:17,170 has many different values that can be applied. 83 00:04:17,170 --> 00:04:18,959 The default one is row. 84 00:04:18,959 --> 00:04:22,530 So this means that we add this rule to our parent, 85 00:04:22,530 --> 00:04:24,780 the header, and then the elements. 86 00:04:24,780 --> 00:04:27,840 Again, the direct children of this container 87 00:04:27,840 --> 00:04:30,660 will be added next to each other. 88 00:04:30,660 --> 00:04:34,390 If we would change row to column, 89 00:04:34,390 --> 00:04:37,550 then these elements would be positioned below each other. 90 00:04:37,550 --> 00:04:42,330 So, column in the end, we could also use column reverse. 91 00:04:42,330 --> 00:04:43,320 As we see it already here, 92 00:04:43,320 --> 00:04:45,510 as a suggestion here in this code, 93 00:04:45,510 --> 00:04:47,830 with this, we would change the order. 94 00:04:47,830 --> 00:04:52,160 Now we have the "nav" bar ahead of the "div" 95 00:04:52,160 --> 00:04:54,040 or instead of column reverse, 96 00:04:54,040 --> 00:04:56,010 we also have row reverse, 97 00:04:56,010 --> 00:04:59,530 this would put our "div" here towards the end. 98 00:04:59,530 --> 00:05:01,087 So towards right here, 99 00:05:01,087 --> 00:05:03,253 and then we would have the navigation bar. 100 00:05:04,590 --> 00:05:07,120 Very important, this different alignment 101 00:05:07,120 --> 00:05:10,880 also has implications on the way flexbox works. 102 00:05:10,880 --> 00:05:13,800 By default, which would be row again. 103 00:05:13,800 --> 00:05:18,220 We have a so-called main axis starting from the top left. 104 00:05:18,220 --> 00:05:22,690 So this here left to right, would be the main axis. 105 00:05:22,690 --> 00:05:25,290 The rest this here, top to bottom, 106 00:05:25,290 --> 00:05:26,970 where we don't have any elements at the moment, 107 00:05:26,970 --> 00:05:29,470 would be so-called cross axis. 108 00:05:29,470 --> 00:05:33,870 So main left to right, cross top to bottom. 109 00:05:33,870 --> 00:05:38,830 If we change the flex direction to row reverse here, 110 00:05:38,830 --> 00:05:40,410 then the main axis, 111 00:05:40,410 --> 00:05:43,300 so the starting point would be to the top right. 112 00:05:43,300 --> 00:05:47,750 So we go from right to left and from top to bottom 113 00:05:47,750 --> 00:05:52,273 with the cross axis. So main axis, cross axis. 114 00:05:53,620 --> 00:05:57,350 If you would use column as a value here, 115 00:05:57,350 --> 00:06:02,350 the main axis would go from, well, top left to the bottom. 116 00:06:02,790 --> 00:06:05,760 The rest, the cross axis would go from the top left 117 00:06:05,760 --> 00:06:10,290 to the right, so main axis, cross axis. 118 00:06:10,290 --> 00:06:14,570 And if it would choose column reverse, 119 00:06:14,570 --> 00:06:16,600 then, what would happen? 120 00:06:16,600 --> 00:06:19,070 Well, the main axis would go from 121 00:06:19,070 --> 00:06:21,660 the bottom left here to the top 122 00:06:21,660 --> 00:06:24,670 and the cross axis would go from the bottom left here 123 00:06:24,670 --> 00:06:27,590 to the right. These are some just generic terms 124 00:06:27,590 --> 00:06:30,100 you will hear if you've worked with flexbox, 125 00:06:30,100 --> 00:06:31,120 for our purpose here, 126 00:06:31,120 --> 00:06:34,690 we can just stick to the normal flex direction of row, 127 00:06:34,690 --> 00:06:37,370 which is, well, left to right for the main axis 128 00:06:37,370 --> 00:06:39,523 and top to bottom for the cross axis. 129 00:06:40,440 --> 00:06:42,590 Besides flex direction row, 130 00:06:42,590 --> 00:06:45,640 we have another rule which is applied by default by adding 131 00:06:45,640 --> 00:06:48,840 display flex rule to our container. 132 00:06:48,840 --> 00:06:52,520 And this is the so-called flex wrap property, 133 00:06:52,520 --> 00:06:54,677 which by default is set to nowrap. 134 00:06:55,550 --> 00:06:59,350 This means if I decrease the width of our window, 135 00:06:59,350 --> 00:07:00,713 nothing is happening here. 136 00:07:01,750 --> 00:07:06,340 If I would change this to wrap and quickly comment out 137 00:07:06,340 --> 00:07:09,550 the redefined width of our container, 138 00:07:09,550 --> 00:07:11,950 then if I decrease the size, 139 00:07:11,950 --> 00:07:16,920 you see it would break down our two elements 140 00:07:16,920 --> 00:07:18,910 once the window is too small. 141 00:07:18,910 --> 00:07:21,330 And just to show you this with nowrap, 142 00:07:21,330 --> 00:07:25,330 even with the width commented out, this is not the case. 143 00:07:25,330 --> 00:07:27,683 It would just, well stay in one line. 144 00:07:28,920 --> 00:07:31,270 The default behavior here is nowrap. 145 00:07:31,270 --> 00:07:34,890 So we can actually delete this rule and also flex direction 146 00:07:34,890 --> 00:07:37,460 because row is also the default value here. 147 00:07:37,460 --> 00:07:40,600 And we can comment back in our width as I would like to have 148 00:07:40,600 --> 00:07:43,500 this fixed with fear for demonstration purposes. 149 00:07:43,500 --> 00:07:46,550 With that, if I decrease the size, it will stay in one line, 150 00:07:46,550 --> 00:07:48,610 but that's the behavior we want to have for 151 00:07:48,610 --> 00:07:52,400 our "nav" bar either way. With that, 152 00:07:52,400 --> 00:07:55,860 we learned our first core flex rules. 153 00:07:55,860 --> 00:07:59,620 So the display flex rule to turn the container into 154 00:07:59,620 --> 00:08:03,940 a flex container and to manage our flex items in here. 155 00:08:03,940 --> 00:08:07,690 So the "div" and the navigation element, 156 00:08:07,690 --> 00:08:10,910 we learned about the flex direction and the flex wrap. 157 00:08:10,910 --> 00:08:14,910 And finally, one other property you will see in flexbox, 158 00:08:14,910 --> 00:08:16,800 is the flex flow, 159 00:08:16,800 --> 00:08:19,670 which is simply a combination of flex direction. 160 00:08:19,670 --> 00:08:22,520 So row in our case, and the flex wrap, 161 00:08:22,520 --> 00:08:24,700 nowrap for our project here. 162 00:08:24,700 --> 00:08:27,640 So this will be the shortcut for flex direction 163 00:08:27,640 --> 00:08:29,580 and flex wrap. As I said, 164 00:08:29,580 --> 00:08:31,320 we are fine with the defaults here. 165 00:08:31,320 --> 00:08:33,693 Therefore we'll stick with this example. 166 00:08:35,000 --> 00:08:38,440 With that, it's time to dive a bit deeper into flexbox now, 167 00:08:38,440 --> 00:08:41,200 because our demonstration "nav" bar here 168 00:08:41,200 --> 00:08:42,799 doesn't look good at the moment.