1 00:00:00,390 --> 00:00:02,160 Hello, everyone, and welcome back. 2 00:00:02,820 --> 00:00:08,140 In today's review, we will learn how to use a responsive grabe using your flex. 3 00:00:08,550 --> 00:00:14,070 And as you can see on the screen, I've got this great for the laptop screens. 4 00:00:14,160 --> 00:00:15,920 It has four cards in one drawer. 5 00:00:16,590 --> 00:00:19,780 When I reduce the size, the margin goes away. 6 00:00:20,870 --> 00:00:23,700 And after that, the guards did start to reduce in size. 7 00:00:24,450 --> 00:00:26,750 They reduce until they reach a minimum red. 8 00:00:27,890 --> 00:00:31,470 And after that, the guard is sent to the next room. 9 00:00:31,590 --> 00:00:33,650 And we only have to go to room now. 10 00:00:34,820 --> 00:00:40,990 Again, when I tried to reduce this red, because the guards are already, at a minimum, good. 11 00:00:41,220 --> 00:00:43,210 So they just move in the next line. 12 00:00:43,850 --> 00:00:46,460 And on the more wider screens, we've got two guards. 13 00:00:47,550 --> 00:00:51,450 So let's try creating this responsive grid, using flex spots. 14 00:00:52,020 --> 00:00:54,650 And as you can see, we've already got these cards here. 15 00:00:56,000 --> 00:00:57,590 So let's bring up our go to the do. 16 00:00:59,240 --> 00:01:00,150 Let's bring it up, shall? 17 00:01:01,730 --> 00:01:05,890 All right, so just start the textbooks first, we need a container. 18 00:01:06,490 --> 00:01:10,900 So as I can see here, the section drops all the articles. 19 00:01:12,940 --> 00:01:17,780 So this can be given, this clearly reflects so coming down here. 20 00:01:20,800 --> 00:01:25,800 Let's say a section on display flipped the table. 21 00:01:26,640 --> 00:01:29,860 And as you can see, all the items are in one robot. 22 00:01:30,270 --> 00:01:31,710 The flexes is overflowing. 23 00:01:33,590 --> 00:01:36,560 So for that, we can do Flex Rock. 24 00:01:37,370 --> 00:01:38,470 Let's go to rally, Rob. 25 00:01:40,810 --> 00:01:44,240 And as you can see, they've got this group. 26 00:01:44,860 --> 00:01:47,980 But it's not in the center of the screen, so let's do that. 27 00:01:49,030 --> 00:01:52,600 So for the arguments and views, justified content town center. 28 00:01:53,500 --> 00:01:58,430 Now, as you can see, the entire grid is in this part of the screen right now. 29 00:01:58,450 --> 00:02:01,060 We have three guards in one room, but we want four. 30 00:02:02,360 --> 00:02:05,970 So coming up to the blog, Cardella, me, too. 31 00:02:06,180 --> 00:02:08,000 In other words, three hundred pixels. 32 00:02:08,810 --> 00:02:11,750 So let's say we want four items so we could do. 33 00:02:11,900 --> 00:02:14,970 Twenty three percent and two percent for the margins. 34 00:02:14,990 --> 00:02:15,800 Left and right. 35 00:02:16,310 --> 00:02:17,040 Let's save it. 36 00:02:18,290 --> 00:02:24,290 Now, as you can see, we've got four guards and wonder if I tried to be size my browser. 37 00:02:25,360 --> 00:02:26,810 The cards are reducing. 38 00:02:29,750 --> 00:02:35,150 But they keep releasing they don't suffer them anymore with because we haven't specified them and mongoloid, 39 00:02:35,990 --> 00:02:37,580 so let us give that as well. 40 00:02:37,680 --> 00:02:40,760 So minimum would say 200 pixels. 41 00:02:41,920 --> 00:02:42,460 Let's save it. 42 00:02:43,480 --> 00:02:45,670 Let's try reducing the size of the boat. 43 00:02:45,910 --> 00:02:51,160 So, as you can see, my guards are getting smaller once they reach just 200 meters. 44 00:02:51,820 --> 00:02:53,530 The guards move to the next line. 45 00:02:54,280 --> 00:02:55,690 Also, if you are just here. 46 00:02:55,930 --> 00:02:59,410 So once you reduce this extra spacing, flows goes away. 47 00:03:00,520 --> 00:03:02,800 So let's try creating that shark. 48 00:03:03,670 --> 00:03:04,960 Let's see why this is happening. 49 00:03:05,020 --> 00:03:07,910 So coming up here in the main section with given. 50 00:03:09,040 --> 00:03:11,810 So as you can see here, they've got padding left and right. 51 00:03:11,830 --> 00:03:12,430 Good pushing. 52 00:03:12,490 --> 00:03:13,630 So let's remove the duck. 53 00:03:14,140 --> 00:03:14,930 Let's make it zero. 54 00:03:15,770 --> 00:03:17,660 And now, as you can see, the guards are pretty big. 55 00:03:18,460 --> 00:03:19,690 And we don't want that. 56 00:03:20,170 --> 00:03:23,830 We want our group to have this spacing on left and right. 57 00:03:24,640 --> 00:03:29,830 So let's give it a marks with, say, twelve hundred pixels. 58 00:03:30,010 --> 00:03:30,520 Let's save it. 59 00:03:31,280 --> 00:03:33,850 And as you can see, that's what a lot of space on the right hand side. 60 00:03:34,390 --> 00:03:37,730 So if we could bring back to the center of the screen. 61 00:03:37,930 --> 00:03:41,440 That should do the trick to degrade something does and do. 62 00:03:41,440 --> 00:03:44,190 We could simply use margin or do so. 63 00:03:44,750 --> 00:03:46,120 Let's give it some margin. 64 00:03:46,220 --> 00:03:47,580 Dorton zero on the left. 65 00:03:47,580 --> 00:03:47,870 Right. 66 00:03:48,070 --> 00:03:48,280 OK. 67 00:03:48,730 --> 00:03:50,200 Save it on. 68 00:03:50,260 --> 00:03:53,650 As you can see, they've got this similar spacing on left and right. 69 00:03:54,370 --> 00:03:55,350 And then introduce it. 70 00:03:56,780 --> 00:03:59,900 My guide to introducing studies, but the spacing goes away. 71 00:04:00,920 --> 00:04:05,240 And once I reach the minimum level, the guards start to reduce in size. 72 00:04:05,960 --> 00:04:08,450 And that's exactly what we wanted to design. 73 00:04:09,500 --> 00:04:10,670 That's all for today, guys. 74 00:04:10,880 --> 00:04:13,190 If there is something that you do not understand. 75 00:04:13,550 --> 00:04:15,900 Feel free to drop a comment and we will discuss it. 76 00:04:17,170 --> 00:04:18,220 See you in the next video. 77 00:04:18,370 --> 00:04:18,700 Bye. 78 00:04:18,910 --> 00:04:19,230 And.