1 00:00:00,960 --> 00:00:01,530 ‫Hey, there. 2 00:00:01,620 --> 00:00:02,370 ‫Welcome back. 3 00:00:03,060 --> 00:00:06,480 ‫Now in this lecture, let us continue our journey with Flexbox. 4 00:00:06,930 --> 00:00:13,380 ‫At this point of time, we have applied the three properties with just addiction rap as well as item. 5 00:00:13,980 --> 00:00:22,500 ‫Now we can mix other properties like if my add, just if I can take here and let me add space around 6 00:00:23,070 --> 00:00:27,720 ‫here, I haven't CBD filed, so I'm currently I'm following the default property. 7 00:00:28,230 --> 00:00:32,790 ‫So if I save this one here, you can see I'm space wrong now. 8 00:00:33,980 --> 00:00:36,880 ‫And remember, by the fall, this is Flagstar. 9 00:00:37,070 --> 00:00:38,570 ‫So if I do send that here. 10 00:00:40,420 --> 00:00:44,340 ‫Save this one, you can see, no, I'm space around according to horizontal way. 11 00:00:44,770 --> 00:00:48,580 ‫And according to Vertical, where I am at center, this is great. 12 00:00:49,240 --> 00:00:54,850 ‫But now our aim is to discuss about properties related to specific related to child. 13 00:00:55,270 --> 00:01:00,940 ‫We understood about the different properties and value related to container acknowledged move towards 14 00:01:00,940 --> 00:01:01,480 ‫item. 15 00:01:02,080 --> 00:01:04,690 ‫The first one is order pretty important. 16 00:01:05,440 --> 00:01:08,290 ‫So suppose we are working with these multiple items. 17 00:01:08,800 --> 00:01:16,300 ‫Item one two three four five sequence that is the order, and I want this item to be at first. 18 00:01:16,690 --> 00:01:22,550 ‫What I can do is I can jump here and then take this added at the top. 19 00:01:22,570 --> 00:01:26,210 ‫OK, that's the best solution that I have currently in mind. 20 00:01:26,650 --> 00:01:32,500 ‫But with CSIS and with Flexbox, I can do that without blowing this whole HDMI thing. 21 00:01:33,400 --> 00:01:40,300 ‫There is a property with each item, which is known as order, and by default, that order is zero. 22 00:01:40,460 --> 00:01:43,300 ‫That means all the item ordered the root order. 23 00:01:43,810 --> 00:01:48,340 ‫But if I change the order as minus one, it will get added for phosphate. 24 00:01:49,320 --> 00:01:51,270 ‫That means it will get before zero. 25 00:01:51,510 --> 00:01:57,810 ‫So if I want to do that, I can get here, select the property order and all minus one. 26 00:01:58,020 --> 00:01:58,950 ‫Save this one. 27 00:01:59,130 --> 00:01:59,940 ‫Get back here. 28 00:02:00,480 --> 00:02:04,260 ‫You can see this is minus one, then zero zero zero zero. 29 00:02:05,040 --> 00:02:07,560 ‫Now maybe I want to move this at the last. 30 00:02:08,010 --> 00:02:09,900 ‫So that means all of them are zero. 31 00:02:09,930 --> 00:02:11,940 ‫If I choose to order as one. 32 00:02:12,990 --> 00:02:14,100 ‫It will be at the last. 33 00:02:14,820 --> 00:02:17,430 ‫So let me change order as one. 34 00:02:18,000 --> 00:02:18,870 ‫Save this one. 35 00:02:19,620 --> 00:02:20,400 ‫Goodbye cat. 36 00:02:21,090 --> 00:02:24,870 ‫So this is minus one zero zero zero and one. 37 00:02:25,470 --> 00:02:27,060 ‫That's how you can arrange things. 38 00:02:27,870 --> 00:02:32,370 ‫Now, the easier example will be I have this order, as you know, for all of them. 39 00:02:40,410 --> 00:02:47,850 ‫And I can provide my own sequence, so I suppose I can give three here, maybe two here and then one 40 00:02:47,850 --> 00:02:53,140 ‫here and then maybe five here and forward had saved this one. 41 00:02:53,160 --> 00:02:53,970 ‫Get back here. 42 00:02:54,960 --> 00:02:58,050 ‫So you can see three, two, one and five and four. 43 00:02:59,420 --> 00:03:06,140 ‫So what I did is the item number three is one line item number two is to sell the item number one is 44 00:03:06,140 --> 00:03:09,220 ‫three, four, five and five as four. 45 00:03:09,290 --> 00:03:11,000 ‫So that's how we switched them. 46 00:03:11,360 --> 00:03:13,130 ‫I hope now you got the idea. 47 00:03:13,610 --> 00:03:20,660 ‫This works well when we want to change only one day or one section and we want to move it at the last 48 00:03:20,660 --> 00:03:22,510 ‫note at the top and works well. 49 00:03:22,580 --> 00:03:23,430 ‫Important one. 50 00:03:24,140 --> 00:03:26,420 ‫Now we are back with our default setting. 51 00:03:27,020 --> 00:03:29,270 ‫The next one is about flex growth. 52 00:03:29,660 --> 00:03:36,200 ‫So when we are working with multiple devs, there are two answers that I want to give one much bigger 53 00:03:36,200 --> 00:03:37,310 ‫size than the other one. 54 00:03:37,730 --> 00:03:40,640 ‫So that's where this flex growth coming into picture. 55 00:03:41,150 --> 00:03:47,390 ‫What I'm going to do is what I just remove this or these properties because I'm trying to move things 56 00:03:47,390 --> 00:03:49,940 ‫here and they are designed to let us get back at the top. 57 00:03:50,480 --> 00:03:53,330 ‫And let me try with this flex group. 58 00:03:53,960 --> 00:03:56,990 ‫So maybe I want to give maximum size to three. 59 00:03:59,600 --> 00:04:02,810 ‫So ahead, I'm going to apply Flex crew to all of them. 60 00:04:05,710 --> 00:04:10,240 ‫And if I put the white legs grow as one to all of them. 61 00:04:13,580 --> 00:04:19,070 ‫They will be distributed equally with our current space matter if I provide. 62 00:04:20,820 --> 00:04:23,130 ‫To do our item number three. 63 00:04:24,760 --> 00:04:26,710 ‫You can see this is taking more space. 64 00:04:29,640 --> 00:04:34,560 ‫So that's why this flex growth is important here, it depends on the ratio, if I take this ratio has 65 00:04:34,560 --> 00:04:35,970 ‫three, save this one. 66 00:04:36,000 --> 00:04:36,800 ‫Get back here. 67 00:04:37,200 --> 00:04:39,270 ‫You can see again the maximum space. 68 00:04:40,470 --> 00:04:46,410 ‫So here what we are doing is we're total have currently three, four, five, six seven, so we total 69 00:04:46,410 --> 00:04:53,700 ‫have suppose seven blocks and three blocks based given two three and then one block space to all of 70 00:04:53,700 --> 00:04:53,970 ‫them. 71 00:04:54,510 --> 00:05:01,290 ‫Suppose here if I dig six, that means out of hundred, this is going to take 60 percent and this is 72 00:05:01,290 --> 00:05:02,570 ‫going to take 10 percent. 73 00:05:02,580 --> 00:05:05,760 ‫And then and then that's how this is going to work. 74 00:05:11,490 --> 00:05:17,040 ‫Now, remember, this is only valid when we have space, if we don't have any extra space, that means. 75 00:05:18,400 --> 00:05:22,690 ‫We are going to jump on to the normal size that was available for each item. 76 00:05:24,240 --> 00:05:26,490 ‫So that's how Flexigroup is going to up. 77 00:05:26,730 --> 00:05:30,120 ‫I hope you are the basic idea and remember, we cannot give negative. 78 00:05:30,990 --> 00:05:33,930 ‫The next important one is about allowing self. 79 00:05:34,260 --> 00:05:41,910 ‫So that means at this point of time, currently, our whole item, whole line is Flex stock. 80 00:05:41,950 --> 00:05:48,930 ‫So if you remember this property, here, we have a property which is known as a line items, which 81 00:05:48,930 --> 00:05:51,100 ‫is currently at Flagstaff. 82 00:05:51,700 --> 00:05:55,100 ‫But for some reason, I want three to be at the bottom. 83 00:05:55,110 --> 00:05:58,280 ‫That means I don't want three to follow this flex stock. 84 00:05:58,710 --> 00:06:00,570 ‫What I can do is I can jump here. 85 00:06:01,650 --> 00:06:05,490 ‫With three, and I can add all property, which just a line self. 86 00:06:05,910 --> 00:06:06,910 ‫And then I can give. 87 00:06:06,930 --> 00:06:14,010 ‫OK, I want to go to Flex and and if I get back here, OK, that's how this is going to work on, maybe 88 00:06:14,010 --> 00:06:15,510 ‫I wanted this to be R center. 89 00:06:17,110 --> 00:06:17,990 ‫Save this one. 90 00:06:18,220 --> 00:06:19,120 ‫And that's it. 91 00:06:20,190 --> 00:06:23,670 ‫That's how we can control the individual element also. 92 00:06:24,450 --> 00:06:30,180 ‫So I hope you got the basic idea about how all of these flex properties are going to up. 93 00:06:30,720 --> 00:06:33,900 ‫Let me give you a quick reminder read container. 94 00:06:33,900 --> 00:06:40,200 ‫We have properties like Flex Detection Flex Ramp, just about on things which depend on main access 95 00:06:40,590 --> 00:06:43,350 ‫Alina dumps, which depend on cross access. 96 00:06:43,800 --> 00:06:49,860 ‫And then we had another property, which is online content, which is not so important. 97 00:06:49,920 --> 00:06:54,600 ‫But don't worry, we will discuss it later than with items we have ordered. 98 00:06:54,810 --> 00:06:56,070 ‫We have flex grow. 99 00:06:56,250 --> 00:07:03,660 ‫We have a line self and there are two other properties which is flex basis, as well as flex strength. 100 00:07:04,020 --> 00:07:08,460 ‫So if we jump here, scroll up a bit, you will see that information. 101 00:07:08,470 --> 00:07:11,350 ‫So Shrink has some meaning as well as basis. 102 00:07:11,370 --> 00:07:17,730 ‫So what we are going to do is in the next lecture, we are going to utilize this tool and then experiment 103 00:07:17,730 --> 00:07:21,210 ‫everything that we recently did with this tool excel. 104 00:07:21,450 --> 00:07:25,230 ‫So we are going to apply all these properties through that tool. 105 00:07:25,350 --> 00:07:26,970 ‫So you're going to experiment more. 106 00:07:27,330 --> 00:07:33,300 ‫I hope now you have basic idea about the properties related to Agile in the next lecture. 107 00:07:33,300 --> 00:07:39,720 ‫Let us do everything again, but this time with a new tool and with tons of experimental example. 108 00:07:40,410 --> 00:07:43,320 ‫Thank you for following, and I see you guys in the next one.