1 00:00:08,189 --> 00:00:09,630 Welcome back. 2 00:00:09,660 --> 00:00:16,670 In this video, let's look at the Flexbox properties that we can use on a parent container. 3 00:00:16,680 --> 00:00:18,540 So here we go. 4 00:00:18,930 --> 00:00:23,520 The first property is what we call the flex direction. 5 00:00:23,820 --> 00:00:32,220 This one simply means that how we want the items to be moved, whether you want it to move from left 6 00:00:32,220 --> 00:00:35,010 to right or from top to bottom. 7 00:00:35,010 --> 00:00:38,550 And this is what we call the flex direction. 8 00:00:38,820 --> 00:00:49,260 And after that we also have another property called align items, as the name even implies how the items 9 00:00:49,260 --> 00:00:58,440 or the children can be aligned and all these properties can be influenced by the main axis or the cross 10 00:00:58,440 --> 00:00:59,160 axis. 11 00:00:59,160 --> 00:01:05,160 And we have a section to talk about main axis and then the cross axis. 12 00:01:05,160 --> 00:01:12,210 For the meantime, know the properties of a parent container and after align items. 13 00:01:12,210 --> 00:01:19,050 We also have what is called justified content where I will show you with code. 14 00:01:19,050 --> 00:01:23,100 And lastly, we have what is called flex wrap. 15 00:01:23,100 --> 00:01:30,960 And for this one it simply means that if there is no space to accommodate the items, it needs to move 16 00:01:30,960 --> 00:01:32,040 on a new line. 17 00:01:32,040 --> 00:01:36,060 So these are the parent properties that you are going to use. 18 00:01:36,060 --> 00:01:38,370 A lot, a lot, a lot. 19 00:01:38,370 --> 00:01:40,740 So please pay attention. 20 00:01:40,740 --> 00:01:44,460 So let's take them one after the other. 21 00:01:44,700 --> 00:01:47,670 Let's talk about the flex direction. 22 00:01:47,670 --> 00:01:55,830 Like I say, this one determines how the items that the children should move, whether as you move from 23 00:01:55,830 --> 00:01:57,370 top to bottom or left. 24 00:01:57,390 --> 00:01:57,990 Right. 25 00:01:57,990 --> 00:02:01,260 So let's see the values for flex direction. 26 00:02:01,260 --> 00:02:06,480 The first one is what you call row, and this is by default. 27 00:02:06,480 --> 00:02:14,580 And you can see that the direction for this one is row, meaning it is from left to right. 28 00:02:14,580 --> 00:02:20,790 In this order, the next value is what we call the row reverse. 29 00:02:20,790 --> 00:02:27,000 Meaning if we want to reverse the row order and I'll show you in just a second. 30 00:02:27,390 --> 00:02:31,440 And after that we have what is called column, meaning. 31 00:02:31,440 --> 00:02:40,020 If you want the items to be on top of each other, we are going to use the column value for flex direction. 32 00:02:40,020 --> 00:02:44,850 And lastly, we also have for this call column reverse. 33 00:02:44,880 --> 00:02:47,570 Let's demonstrate that with code. 34 00:02:47,580 --> 00:02:49,920 So back to Visual Studio code. 35 00:02:49,920 --> 00:02:51,420 This where we left. 36 00:02:51,420 --> 00:03:01,380 Now when I provide a property called Flex Direction and by default the direction is row. 37 00:03:01,380 --> 00:03:10,080 When I save it, you can see that it is the default behavior and the next value is what you call the 38 00:03:10,080 --> 00:03:11,520 row reverse. 39 00:03:11,670 --> 00:03:12,420 Take note. 40 00:03:12,420 --> 00:03:18,930 You can see that it is starting from A, B and C from left to right. 41 00:03:18,930 --> 00:03:25,770 Now, if I change this one to row reverse, now have a look. 42 00:03:25,920 --> 00:03:35,280 You can see that the direction is from way top, right corner to left and starting from A, B and C, 43 00:03:35,310 --> 00:03:42,090 meaning I have reversed the order and the next property of value is called column. 44 00:03:42,420 --> 00:03:50,670 So if I want the items to be on top of each other, I'm going to use column as we see, we see that 45 00:03:50,670 --> 00:03:53,580 they are on top of each other. 46 00:03:53,910 --> 00:04:01,500 If we add a with 1%, you can see that I'm going to cover the entire available space. 47 00:04:01,500 --> 00:04:03,060 So let's do that. 48 00:04:03,060 --> 00:04:05,580 Let's say on the width of the child. 49 00:04:05,580 --> 00:04:14,100 One, I wanted to cover the entire page and you can see that that's what we have our copy this one, 50 00:04:14,130 --> 00:04:17,820 paste it here and paste it to save it. 51 00:04:17,820 --> 00:04:24,600 And you can see that they are on what, on top of each other from top to bottom. 52 00:04:24,600 --> 00:04:32,880 And I explain to you the movement of the items in the next video, and I can also reverse this one by 53 00:04:32,880 --> 00:04:35,700 adding what is called column reverse. 54 00:04:35,730 --> 00:04:42,930 Now you can see that I have reversed the order and you can see that it is from bottom to top. 55 00:04:42,930 --> 00:04:45,750 That is the column reverse. 56 00:04:45,960 --> 00:04:52,740 So this added a basic concept when it comes to Flexbox, but that is not all. 57 00:04:52,800 --> 00:05:03,000 We are going to dive in to look at how we can move these elements around and the movements of the elements 58 00:05:03,000 --> 00:05:07,350 or the children or the items depends on the. 59 00:05:07,690 --> 00:05:10,780 Mean or the cross axis. 60 00:05:10,780 --> 00:05:12,370 To better understand. 61 00:05:12,370 --> 00:05:23,290 Flexbox the key concept you need to know is what we call the main versus cross axis, because this axis 62 00:05:23,290 --> 00:05:28,720 determines how the items or the children is going to behave. 63 00:05:28,960 --> 00:05:35,740 Then this video, let's have a look at when we say main or cross ises, what does it mean?