1 00:00:00,700 --> 00:00:02,500 Hello, everyone, and welcome back. 2 00:00:03,670 --> 00:00:07,240 In today's video, we can learn about Fleck's container properties. 3 00:00:08,050 --> 00:00:11,110 Let's start with the first property display, flames. 4 00:00:11,980 --> 00:00:17,790 This property is used to tell the browser that the dirt on its children will follow Fleck's layout rules. 5 00:00:18,700 --> 00:00:21,030 So let's try giving this different display. 6 00:00:21,960 --> 00:00:22,960 So come in here. 7 00:00:23,630 --> 00:00:25,420 So we've already got this container here. 8 00:00:25,480 --> 00:00:27,370 So let's change the display on it. 9 00:00:28,100 --> 00:00:34,240 Say honestly, Fleck's let's say there are now, as you can see, all the items are moved next to each 10 00:00:34,240 --> 00:00:38,810 other and are taking only enough space to drop the content by. 11 00:00:38,810 --> 00:00:40,760 They followed the direction of this rule. 12 00:00:41,440 --> 00:00:44,200 But we can change that using the Flex Direction property. 13 00:00:44,680 --> 00:00:45,490 So let's try that. 14 00:00:46,570 --> 00:00:51,490 So flex direction, let's say you are now going to save it. 15 00:00:51,520 --> 00:00:55,120 Nothing changes because as I just mentioned, rule is the default value. 16 00:00:55,600 --> 00:00:57,640 So that's how these are positioned. 17 00:00:58,120 --> 00:01:00,430 Let's try another very road reverse. 18 00:01:00,520 --> 00:01:01,120 Let's say the. 19 00:01:02,910 --> 00:01:05,540 And as you can see, they are just a line on the right. 20 00:01:05,600 --> 00:01:08,330 So if you see here, the first element is the one. 21 00:01:08,900 --> 00:01:12,270 The second is the do the live trade, then did four. 22 00:01:12,890 --> 00:01:14,630 So if I just bring this down here. 23 00:01:16,710 --> 00:01:17,790 I just remove and save it. 24 00:01:18,270 --> 00:01:23,970 So, as you can see, the live is starting from one to two foot, but then you make it through a divorce. 25 00:01:24,030 --> 00:01:25,530 They don't just move under it. 26 00:01:25,560 --> 00:01:26,880 They start from the right. 27 00:01:27,730 --> 00:01:27,930 Right. 28 00:01:28,590 --> 00:01:35,880 Similarly, it's driving up the value which is falling, let's say, but not as you can see, all the 29 00:01:35,880 --> 00:01:37,210 elements are stacked. 30 00:01:37,380 --> 00:01:38,950 So moved by the first on the door. 31 00:01:39,180 --> 00:01:40,650 On the last on the bottom. 32 00:01:41,840 --> 00:01:44,570 Similarly, it accepts an avalanche of voluntary votes. 33 00:01:45,000 --> 00:01:45,660 Let's say that. 34 00:01:46,580 --> 00:01:49,710 And as you can see, the elements are starting from the bottom. 35 00:01:49,950 --> 00:01:51,630 So divine is at the bottom. 36 00:01:51,720 --> 00:01:55,520 So the one then on top of that have to process. 37 00:01:55,740 --> 00:01:58,660 Therefore, let's just bring it back to rule for now. 38 00:01:59,630 --> 00:02:00,170 Let's save it. 39 00:02:01,050 --> 00:02:04,440 So, as you can see, these elements are next to each other. 40 00:02:04,650 --> 00:02:07,710 So there's a lot of empty space over here. 41 00:02:08,310 --> 00:02:10,480 So let's try to manage this available space. 42 00:02:11,340 --> 00:02:14,490 See if you want all the elements to have equal space between them. 43 00:02:15,240 --> 00:02:18,860 For that, we can use another property called justified content. 44 00:02:19,560 --> 00:02:21,120 So let's bring up a good idea to. 45 00:02:22,440 --> 00:02:30,230 Justify content, safe space between, let's say it, and now, as you can see, all the available space 46 00:02:30,290 --> 00:02:34,130 is divided equally between all these elements. 47 00:02:34,940 --> 00:02:41,570 So if, you know, does this justify collective property, it works on the main axis and it except some 48 00:02:41,570 --> 00:02:41,850 more. 49 00:02:42,120 --> 00:02:43,150 So let's try that. 50 00:02:43,520 --> 00:02:50,000 So in sort of space between let's say we want all these items to have the same space around them, also 51 00:02:50,420 --> 00:02:53,990 some sort of space between we could do space around the table. 52 00:02:54,900 --> 00:02:58,910 And now, as you can see, all the way through, space is divided around. 53 00:02:59,450 --> 00:03:00,910 So it's got space here. 54 00:03:00,920 --> 00:03:01,360 Here. 55 00:03:02,420 --> 00:03:03,200 Even on the left. 56 00:03:03,200 --> 00:03:04,960 And I can say a little thing. 57 00:03:04,970 --> 00:03:06,660 You can move everything at the star. 58 00:03:06,950 --> 00:03:08,570 So let's say flick star. 59 00:03:09,230 --> 00:03:11,060 So all these items, they move to the star. 60 00:03:11,930 --> 00:03:14,000 Similarly, we can move them to the end. 61 00:03:14,150 --> 00:03:22,280 So we could do physics and so on, like direction reverse flicks and moves everything to the end of 62 00:03:22,280 --> 00:03:23,540 the main axis. 63 00:03:24,440 --> 00:03:27,290 So as you can see, we've got the one, two, three, four. 64 00:03:27,800 --> 00:03:29,960 Similarly, we can look at the center as well. 65 00:03:29,990 --> 00:03:32,130 So for the object and just use this center. 66 00:03:32,840 --> 00:03:37,910 And now all the elements are in the center horizontally or on the main axis. 67 00:03:38,300 --> 00:03:41,390 Similarly, let's try this property for GOLOMB as well. 68 00:03:41,900 --> 00:03:43,550 So let's change this to column. 69 00:03:44,030 --> 00:03:48,050 Let's save it because there is no extra space. 70 00:03:48,080 --> 00:03:49,460 So let's increase the height. 71 00:03:50,150 --> 00:03:51,930 So a hundred old high. 72 00:03:52,610 --> 00:03:53,070 Let's see here. 73 00:03:55,040 --> 00:04:00,820 And right now, justified content is S.O.S, so that's why all these items are in the center across 74 00:04:00,820 --> 00:04:04,600 the main axis, which is vertical, not because this is a column. 75 00:04:05,110 --> 00:04:08,940 Similarly, let's try a space between, let's say, lip. 76 00:04:09,190 --> 00:04:12,100 And now, as you can see, there is a good squeeze between all the items. 77 00:04:12,700 --> 00:04:15,350 Let's try changing it to space around. 78 00:04:16,360 --> 00:04:21,610 Let's say would not, as you can see, this space on the top and bottom as well. 79 00:04:22,210 --> 00:04:29,230 Similarly, that strategy need to flex start because this is a column so that it can move to the top. 80 00:04:29,530 --> 00:04:32,410 We can último everything at the bottom by using fixed in. 81 00:04:32,920 --> 00:04:34,630 So everything came down. 82 00:04:35,380 --> 00:04:35,680 All right. 83 00:04:35,740 --> 00:04:38,500 So let's bring everything back to normal right now. 84 00:04:38,530 --> 00:04:40,480 So flex to action, Drew. 85 00:04:41,140 --> 00:04:42,460 Let's remove the height. 86 00:04:43,500 --> 00:04:43,780 All right. 87 00:04:44,770 --> 00:04:47,710 So what about this Norman Slick's container? 88 00:04:48,430 --> 00:04:51,930 Let's say we have more items, so let's just come here. 89 00:04:52,260 --> 00:04:56,840 So coming to next Nexus, she will file its copy, paste it here. 90 00:04:57,980 --> 00:04:59,330 No, we have double lights. 91 00:05:00,240 --> 00:05:01,620 Let's face it again. 92 00:05:02,700 --> 00:05:09,250 Now, as you can see, we've got item is a big shrink because the DERF the numbers on the next day. 93 00:05:09,320 --> 00:05:11,420 Now, let's face it again. 94 00:05:11,970 --> 00:05:16,930 Now, as you can see, the content is overflowing because Flick's cannot shrink it anymore. 95 00:05:16,980 --> 00:05:18,170 So that's why the content is. 96 00:05:19,530 --> 00:05:22,560 By default, Flick's doesn't Rupp's content in the next line. 97 00:05:22,650 --> 00:05:24,540 But we can do that using the property. 98 00:05:25,180 --> 00:05:25,500 Right. 99 00:05:26,070 --> 00:05:26,970 So let's give it a try. 100 00:05:28,230 --> 00:05:28,680 So coming. 101 00:05:28,710 --> 00:05:33,120 But Hugh, let's say Flick's wrap. 102 00:05:34,260 --> 00:05:35,820 It accepts a value wrap. 103 00:05:35,880 --> 00:05:36,690 Let's save it. 104 00:05:37,500 --> 00:05:41,400 Now, as you can see, all that Golo fluid content is coming on the next line. 105 00:05:43,340 --> 00:05:46,270 Similarly, it accepts volume, in fact, the reverse. 106 00:05:47,120 --> 00:05:52,170 Let's say that, as you can see, the content stops from the second line and it goes to the end. 107 00:05:53,060 --> 00:05:56,300 And when it's about delusional, it moves to the line above it. 108 00:05:56,780 --> 00:05:59,570 So that's how this rapid and most works. 109 00:05:59,870 --> 00:06:01,850 It also accepts this value, no doubt. 110 00:06:02,450 --> 00:06:07,380 So in case you don't want to rob the elements, you could simply do Nora. 111 00:06:09,860 --> 00:06:12,030 Similarly, let's try this Wahidi for them as well. 112 00:06:12,320 --> 00:06:15,710 So coming back, Hugh, let's remove this. 113 00:06:15,770 --> 00:06:17,000 Let's change it to. 114 00:06:18,380 --> 00:06:19,010 Let's save it. 115 00:06:19,730 --> 00:06:24,040 And right now, as you can see, there's not overflow because it does not give a fixed height to our 116 00:06:24,320 --> 00:06:25,170 flex element. 117 00:06:25,550 --> 00:06:27,320 So it's scrolling vertically. 118 00:06:27,650 --> 00:06:28,790 So let's give it a height. 119 00:06:31,180 --> 00:06:32,860 Say a hundred we put. 120 00:06:33,990 --> 00:06:34,860 Let's save up. 121 00:06:36,980 --> 00:06:39,620 As you can see now, it's overflowing outside. 122 00:06:40,730 --> 00:06:41,570 So that's changed. 123 00:06:42,650 --> 00:06:45,110 So let's say Flex Rock. 124 00:06:45,590 --> 00:06:46,690 Let's go live underground. 125 00:06:47,930 --> 00:06:53,120 Now, as you can see, once it reaches the N word quickly, it creates a little column. 126 00:06:53,930 --> 00:06:57,320 And once it reaches the end, it creates another column. 127 00:06:57,950 --> 00:06:59,810 Let's try giving it a value, the most corrupt. 128 00:07:01,240 --> 00:07:03,740 So we're up reviews, let's say. 129 00:07:04,670 --> 00:07:06,770 And now, as you can see, it starts from the end. 130 00:07:07,380 --> 00:07:09,830 So one them then do column. 131 00:07:10,050 --> 00:07:11,280 And then the third column. 132 00:07:12,090 --> 00:07:13,110 That's all for today, guys. 133 00:07:13,200 --> 00:07:15,270 If there is something that you did not understand. 134 00:07:15,330 --> 00:07:17,730 Feel free to drop a comment and we will discuss it. 135 00:07:18,330 --> 00:07:19,470 See you in the next video. 136 00:07:19,600 --> 00:07:19,800 Bye. 137 00:07:20,050 --> 00:07:20,700 And again.