1 00:00:02,440 --> 00:00:07,550 So this is our theory project which will guide us through this module. As you can see, 2 00:00:07,570 --> 00:00:10,660 it's basically quite a simple project, 3 00:00:10,660 --> 00:00:14,430 we have our div right here, the div with the class flex container, 4 00:00:14,500 --> 00:00:16,090 that's what I just showed you on the slide, 5 00:00:16,090 --> 00:00:24,280 this is basically this wrapping element and inside this container, we have six different divs. Each div has 6 00:00:24,270 --> 00:00:26,860 an own class, so from item 1 to item 6, 7 00:00:26,890 --> 00:00:33,150 so we basically have six so-called flex items in the end and each item has different content. 8 00:00:33,280 --> 00:00:34,550 This is simply a div, 9 00:00:34,610 --> 00:00:42,070 this has a width of 250 pixels, as you can see, I'm using box sizing border box so we have 250 pixels right 10 00:00:42,070 --> 00:00:45,260 here as the entire width of the element 11 00:00:45,610 --> 00:00:48,520 and then we have an item with a height of 250 pixels. 12 00:00:48,700 --> 00:00:54,340 Then we have an item with a width and a height of 300 pixels and we have two items with an equal width of 13 00:00:54,370 --> 00:00:56,030 350 pixels. 14 00:00:56,200 --> 00:00:59,690 You will see throughout this module why this information is important, 15 00:00:59,710 --> 00:01:05,110 therefore I added it right here. If we have a look at our code, you can of course find the same code 16 00:01:05,110 --> 00:01:06,190 right here in the index.html 17 00:01:06,190 --> 00:01:11,380 file and we have a CSS file which has some basic styling applied. 18 00:01:11,500 --> 00:01:13,870 As I said, we have border box for example, 19 00:01:13,870 --> 00:01:15,870 we have some background color for the HTML 20 00:01:16,030 --> 00:01:22,880 and for the body elements and then we have the flex container and our different flex items. 21 00:01:22,890 --> 00:01:28,960 Now the great thing is for the moment that the first part of this module will solely focus onto this 22 00:01:29,020 --> 00:01:35,920 flex container right here because that's as you saw, the first core concept of flexbox, we will create 23 00:01:35,920 --> 00:01:40,230 a so-called flex container and then apply different properties to it. 24 00:01:40,240 --> 00:01:43,420 Now the code to this can of course be found attached to this video, 25 00:01:43,480 --> 00:01:49,330 so make sure to use this code to get started right now with our flexbox project. 26 00:01:49,330 --> 00:01:52,650 So what does it take now to create such a flex container? 27 00:01:52,870 --> 00:01:57,500 Well as you also saw on the slide, we simply have to add our display property, 28 00:01:57,520 --> 00:02:04,870 once again, this one right here and now we will simply write display flex, like that. If we now save that 29 00:02:04,900 --> 00:02:07,530 and go back to our page and not reload it 30 00:02:07,690 --> 00:02:10,240 but now have a look at the default behavior we have, 31 00:02:10,240 --> 00:02:16,810 so this is the normal behavior see for block level elements, as you can see, we can change the size or 32 00:02:16,810 --> 00:02:22,480 the width and it will decrease the width until it hits the defined width right here 33 00:02:22,560 --> 00:02:24,790 and that's actually everything we know so far, 34 00:02:24,840 --> 00:02:26,410 so no surprises right here. 35 00:02:26,730 --> 00:02:31,570 If we now reload the page, we can see a lot of interesting things. 36 00:02:31,590 --> 00:02:36,700 The first thing and the most obvious one is that our elements are now displayed in one row, 37 00:02:36,720 --> 00:02:42,540 so not according to the typical block level element behavior that we saw so far 38 00:02:42,540 --> 00:02:50,040 and we also see that the elements, except for the third one, use the entire height available in the parent 39 00:02:50,070 --> 00:02:50,880 element. 40 00:02:50,940 --> 00:02:58,290 The height is then actually defined by this third element right here, as you can see with the 300 pixels height 41 00:02:58,740 --> 00:03:04,710 and all the other elements follow this value because we didn't define a height for the rest except for 42 00:03:04,710 --> 00:03:06,050 this third item right here, 43 00:03:06,120 --> 00:03:09,860 so this only has a height of 250 pixels. 44 00:03:09,870 --> 00:03:15,060 Another thing we see is that if we decrease the width right here, we can see that the width of the elements 45 00:03:15,120 --> 00:03:20,430 decreases, as you can see, up to here, up to the point where the content, 46 00:03:20,430 --> 00:03:25,270 this one right here or that one needs the space inside the element. 47 00:03:25,350 --> 00:03:31,740 If we increase the width, we can see that the parent element increases and basically behaves like a normal 48 00:03:31,770 --> 00:03:33,830 block level element. 49 00:03:33,900 --> 00:03:35,330 So that's the first thing we did 50 00:03:35,490 --> 00:03:36,850 and very important, 51 00:03:36,970 --> 00:03:38,940 with applying display flex, 52 00:03:38,940 --> 00:03:44,550 we also turned our flex container class right here into such. 53 00:03:44,550 --> 00:03:46,500 So this is now a flex container 54 00:03:46,800 --> 00:03:52,750 and all the items inside this container, so the six items are now flex items. 55 00:03:52,770 --> 00:03:57,690 This automatically happened just because we added display flex to the parent. 56 00:03:57,690 --> 00:04:05,500 Now let's go back and let's see if we have another value because we do, we also have inline flex, 57 00:04:05,520 --> 00:04:09,300 this one right here, not inline block but inline flex. 58 00:04:09,300 --> 00:04:14,370 If we apply that and reload the page, you can immediately see what happens right now 59 00:04:14,700 --> 00:04:22,580 because in contrast to the display flex declaration, we now basically cannot change the size of 60 00:04:22,620 --> 00:04:29,400 our elements because the size is now simply predefined by the actual width that was defined and also 61 00:04:29,400 --> 00:04:32,350 the parent element doesn't change its size anymore, 62 00:04:32,520 --> 00:04:36,470 it just uses the space that is required to display all the content, 63 00:04:36,480 --> 00:04:42,480 so basically, it behaves like an inline element. What is still interesting though is that the height, this 64 00:04:42,480 --> 00:04:47,820 one right here, is still used according to the definition of the fourth item right here. 65 00:04:48,060 --> 00:04:52,020 We'll dive deeper into the reasons for that later throughout this module 66 00:04:52,350 --> 00:04:58,320 but the important thing to keep in mind for now is that we basically can apply display flex or display 67 00:04:58,440 --> 00:05:00,920 inline flex to our parent element, 68 00:05:01,110 --> 00:05:06,420 this will then become the flex container and the elements inside this flex container will become the 69 00:05:06,420 --> 00:05:08,030 flex items. 70 00:05:08,050 --> 00:05:14,240 However, let's change back the value to flex for now because we will probably use that throughout this module. 71 00:05:14,430 --> 00:05:22,230 So if we reload now, we can see that the block level behavior is back again and in the next lecture, we'll 72 00:05:22,240 --> 00:05:27,120 now have a look at two additional properties because by applying display flex or display 73 00:05:27,120 --> 00:05:31,590 inline flex, we automatically apply these two additional properties.