1 00:00:00,890 --> 00:00:02,600 Hello, everyone, and welcome back. 2 00:00:03,480 --> 00:00:10,040 In today's reveal, we learn about Flick's item properties, so these properties are used on Fleck's 3 00:00:10,100 --> 00:00:11,660 items, not Flick's container. 4 00:00:12,260 --> 00:00:13,680 Let's start with the first one. 5 00:00:14,090 --> 00:00:20,270 So if you want to stretch all these items to date, they will lose face horizontally because this is 6 00:00:20,720 --> 00:00:21,400 Direxion rule. 7 00:00:21,430 --> 00:00:25,250 So what do you mean as we want to stretch them across the main axis? 8 00:00:25,640 --> 00:00:31,310 So if you wanted to stretch them across vertical axis or cross axis, we could have simply used a line 9 00:00:31,340 --> 00:00:31,970 items. 10 00:00:32,390 --> 00:00:36,380 But you understood description of us horizontally or across the main axis. 11 00:00:36,770 --> 00:00:39,890 So we could simply use another property like Flex Grow. 12 00:00:40,220 --> 00:00:41,510 It accepts a number of value. 13 00:00:41,810 --> 00:00:43,490 So by defining this value is zero. 14 00:00:43,700 --> 00:00:49,110 So if I add this property here, flex and grow on, let's give it a dividing proces zero. 15 00:00:49,700 --> 00:00:52,050 Nothing changes because this is the default value. 16 00:00:52,280 --> 00:00:56,510 But here what we want to do is make all the elements grow by the same size. 17 00:00:57,140 --> 00:01:00,270 So we could simply give it the value one that's even. 18 00:01:01,310 --> 00:01:05,880 As you can see here, all these elements are expanded that this same with. 19 00:01:06,440 --> 00:01:13,430 So they've got equal size in all living wills, space or let's say we want the second item to be twice 20 00:01:13,430 --> 00:01:15,080 the size of other items. 21 00:01:15,860 --> 00:01:18,590 So in that case, we could simply select the second item. 22 00:01:19,250 --> 00:01:20,060 So item. 23 00:01:22,260 --> 00:01:25,220 And the child, let's say, second. 24 00:01:26,480 --> 00:01:27,900 Let's change the background color. 25 00:01:28,620 --> 00:01:31,510 See bisque or Priscu? 26 00:01:31,560 --> 00:01:32,070 I don't know. 27 00:01:32,880 --> 00:01:33,620 So let's save that. 28 00:01:33,780 --> 00:01:37,060 And now, as you can see, our second item has the background color. 29 00:01:37,410 --> 00:01:39,240 So let's give it a flex grow value. 30 00:01:39,390 --> 00:01:40,000 So let's see. 31 00:01:40,110 --> 00:01:41,490 Do let's see here. 32 00:01:42,610 --> 00:01:46,650 Now, as you can see, it has double the width of other items. 33 00:01:47,460 --> 00:01:51,090 Similarly, see, we wanted an item to be smaller than other items. 34 00:01:51,120 --> 00:01:54,450 We could simply use another block with decoyed flakes to shrink. 35 00:01:55,290 --> 00:01:59,130 So instead of flick's grow, let's try using flex shrink. 36 00:01:59,520 --> 00:02:01,590 Let's say do so. 37 00:02:01,620 --> 00:02:04,710 We want this to be half the size of other elements. 38 00:02:04,740 --> 00:02:05,340 Let's save it. 39 00:02:06,270 --> 00:02:07,880 As you can see, nothing happens here. 40 00:02:08,880 --> 00:02:09,510 Why is that? 41 00:02:09,600 --> 00:02:13,280 Because this flex global body is also being applied to this item. 42 00:02:14,510 --> 00:02:16,710 Flex grew, inflects, shrink, don't work together. 43 00:02:17,100 --> 00:02:19,800 So first we need to do Fleck's Grozier. 44 00:02:20,190 --> 00:02:25,380 So we are sending them back to their default value and not, as you can see, just the second day was 45 00:02:25,380 --> 00:02:27,120 smaller than other days. 46 00:02:27,600 --> 00:02:34,170 Let's remove all these shrink and group of ladies, let's say, well, let's do this also. 47 00:02:34,770 --> 00:02:39,220 So as you can see, by default, the items take just enough rehder up to content. 48 00:02:39,990 --> 00:02:43,550 But we can give these items a minimum bid for that CLECs house. 49 00:02:43,650 --> 00:02:45,960 Another property called flex basis. 50 00:02:46,620 --> 00:02:47,490 So let's try that. 51 00:02:48,700 --> 00:02:51,500 So flex basis, let's say. 52 00:02:52,450 --> 00:02:54,250 Hundred and twenty pixels that's saved. 53 00:02:54,960 --> 00:02:58,210 And now, as you can see, all these items have a default minimum by those. 54 00:02:58,360 --> 00:03:01,360 Hundred and twenty six houses and other blue property. 55 00:03:01,420 --> 00:03:03,970 It helps you change the sequence of these items. 56 00:03:04,700 --> 00:03:05,850 The so-called order. 57 00:03:06,910 --> 00:03:11,140 And by default, all the Fleck's items have a default value off to zero. 58 00:03:12,160 --> 00:03:15,250 So to bring something at the start, we could do oughton minus one. 59 00:03:15,370 --> 00:03:16,300 So let's give it a try. 60 00:03:16,900 --> 00:03:20,470 Let's say you want to move this second one on the first position. 61 00:03:21,010 --> 00:03:23,890 So we could just give it a value order minus one. 62 00:03:24,550 --> 00:03:25,120 Let's save it. 63 00:03:26,030 --> 00:03:29,980 And now, as you can see, the second element is moved to the first position. 64 00:03:30,880 --> 00:03:32,890 He said he wanted to move this at the end. 65 00:03:33,610 --> 00:03:38,080 So by default, everything as a value zero and one is greater than zero. 66 00:03:38,140 --> 00:03:39,880 So we could simply use one. 67 00:03:40,960 --> 00:03:45,260 And as you can see here, the second live is moved at the end. 68 00:03:45,850 --> 00:03:48,580 Now, say, if you want to do a line, particular items. 69 00:03:48,710 --> 00:03:53,090 So in that case, you could use the property line itself. 70 00:03:53,480 --> 00:03:54,810 So let's go in this for now. 71 00:03:56,140 --> 00:03:58,510 Let's save it and everything is back to normal. 72 00:03:59,230 --> 00:04:04,090 Now see if you wanted to second and third element to our different alane value. 73 00:04:04,240 --> 00:04:07,070 So in that case, first, let's select the second and third element. 74 00:04:07,780 --> 00:04:09,970 So for that, we could do something like this. 75 00:04:10,370 --> 00:04:10,880 I do. 76 00:04:11,390 --> 00:04:14,290 And a child even. 77 00:04:15,970 --> 00:04:17,750 Let's give it a back Onkalo. 78 00:04:20,060 --> 00:04:20,410 Let's see. 79 00:04:21,240 --> 00:04:25,430 And now, as you can see, the second and fourth element has a different background color. 80 00:04:26,060 --> 00:04:28,750 Let's say you want them to be aligned in the center. 81 00:04:28,910 --> 00:04:30,860 So we could do something like this. 82 00:04:31,670 --> 00:04:33,370 Align itself center. 83 00:04:33,560 --> 00:04:34,690 Let's save it on. 84 00:04:34,740 --> 00:04:38,320 Nothing changed because there is no extra space will tickly. 85 00:04:39,520 --> 00:04:42,260 So let's add some height here, let's say. 86 00:04:42,320 --> 00:04:44,980 Height on 400 pixels. 87 00:04:45,130 --> 00:04:48,640 Let's say that on, as you can see, the second on foot. 88 00:04:48,840 --> 00:04:50,230 Images line in the center. 89 00:04:50,890 --> 00:04:55,190 Similarly, that you wanted audience to be line in the star. 90 00:04:55,930 --> 00:04:57,930 So we could do something like this. 91 00:04:59,680 --> 00:05:01,470 And a child on board. 92 00:05:04,200 --> 00:05:06,770 Let's say a line serve on staff. 93 00:05:07,050 --> 00:05:07,730 Let's save it. 94 00:05:08,490 --> 00:05:13,710 As you can see, the order elements are aligned at the start. 95 00:05:13,800 --> 00:05:15,960 On even a line in the sand to. 96 00:05:17,030 --> 00:05:18,080 That's all for today, guys. 97 00:05:18,170 --> 00:05:20,300 If there's something that you did not understand. 98 00:05:20,990 --> 00:05:22,530 Feel free to drop a comment on. 99 00:05:22,550 --> 00:05:23,390 We will discuss it. 100 00:05:23,780 --> 00:05:24,820 See you in the next video. 101 00:05:24,950 --> 00:05:25,260 Bye. 102 00:05:25,370 --> 00:05:26,090 And Victor.