1 00:00:00,520 --> 00:00:02,180 Hello, everyone, and welcome back. 2 00:00:03,590 --> 00:00:07,260 In this we do we will try to use Flex to design this dog bar. 3 00:00:07,810 --> 00:00:13,870 So right now we have all the components, we've got the logo, the menu items, search box notification 4 00:00:13,870 --> 00:00:16,140 bill on the profile pic. 5 00:00:16,810 --> 00:00:21,080 So we just have to use Flex to design this layout. 6 00:00:21,670 --> 00:00:22,690 So let's give it a try. 7 00:00:23,590 --> 00:00:24,870 Let's bring up a good editor. 8 00:00:26,140 --> 00:00:33,050 So as you can see here inside the novel, it's got all these different components less valuable. 9 00:00:33,150 --> 00:00:33,770 Good to hear. 10 00:00:34,750 --> 00:00:37,750 So what we want is, do you want two groups? 11 00:00:37,810 --> 00:00:38,400 First group. 12 00:00:38,470 --> 00:00:41,140 This Eduarda on these three menu items to be together. 13 00:00:41,800 --> 00:00:46,580 And then another group to bring the search box notification and provide back together. 14 00:00:47,100 --> 00:00:49,090 And for that purpose, you can use def. 15 00:00:50,560 --> 00:00:51,550 So let's try that. 16 00:00:52,870 --> 00:00:54,370 So we've got to do a few. 17 00:00:59,320 --> 00:01:00,800 All right, let's save it. 18 00:01:01,640 --> 00:01:02,620 So coming back to. 19 00:01:04,160 --> 00:01:05,820 Let's give it an I.D., see? 20 00:01:05,930 --> 00:01:06,740 Left menu. 21 00:01:08,110 --> 00:01:08,860 That's a good. 22 00:01:13,200 --> 00:01:15,090 Let's add some science to this left many. 23 00:01:15,480 --> 00:01:18,240 So now what you want is everything to be next to each other. 24 00:01:18,420 --> 00:01:22,330 So for that, we can simply use displayed flakes. 25 00:01:22,990 --> 00:01:23,640 Let's save it. 26 00:01:24,430 --> 00:01:28,630 Similarly for the stick insect we can adopt in there, live and use this bleep. 27 00:01:30,660 --> 00:01:31,410 So. 28 00:01:33,760 --> 00:01:35,770 Let's just drop all these things together. 29 00:01:41,130 --> 00:01:43,490 Let's give it an I.D., see right menu. 30 00:01:44,520 --> 00:01:45,150 Let's savor. 31 00:01:47,980 --> 00:01:51,370 Let's give this also display flex. 32 00:01:53,820 --> 00:01:54,390 Let's save that. 33 00:01:55,440 --> 00:02:02,010 Now, as I can see, both the menu items are grouped and as you can notice, these menu items aren't 34 00:02:02,100 --> 00:02:03,860 aligned in the center vertically. 35 00:02:04,380 --> 00:02:07,110 So for that, we can use a line items. 36 00:02:08,900 --> 00:02:11,120 We can simply use the volume of senator. 37 00:02:12,620 --> 00:02:16,140 Now, as you can see, for the first one, everything is central line. 38 00:02:17,020 --> 00:02:19,630 Similarly, it's do it for the right menu as well. 39 00:02:20,840 --> 00:02:22,900 So a line items center. 40 00:02:23,610 --> 00:02:26,800 And now, as you can see, everything is centered the vertical. 41 00:02:28,480 --> 00:02:32,700 Now, another thing that we need is we need to put them next to each other. 42 00:02:32,740 --> 00:02:34,730 But with all this space in the middle. 43 00:02:35,440 --> 00:02:36,400 So let's try that. 44 00:02:37,210 --> 00:02:38,810 So if you see, I could here. 45 00:02:39,560 --> 00:02:41,960 So both these dudes are inside now. 46 00:02:42,720 --> 00:02:45,640 So we can use display flex now as well. 47 00:02:46,030 --> 00:02:49,150 So now on display flex. 48 00:02:50,910 --> 00:02:51,570 Let's save it. 49 00:02:52,120 --> 00:02:53,920 And as you can see, both are next to each other. 50 00:02:53,970 --> 00:02:55,650 But we want space in between. 51 00:02:56,190 --> 00:02:57,690 So does that ring any bells? 52 00:02:58,690 --> 00:03:04,260 You can simply use justify contant space between let's save it. 53 00:03:04,980 --> 00:03:10,950 And as you can see, these are in the same lane, but have all the space in between. 54 00:03:11,580 --> 00:03:15,150 Similarly, we need some space over here between all these elements. 55 00:03:16,330 --> 00:03:18,800 So it's going back to you. 56 00:03:19,840 --> 00:03:26,550 So for the notification, I can we already have an I.D., so let's give it to margined left to succeed 57 00:03:26,560 --> 00:03:27,430 Dick Silts. 58 00:03:28,430 --> 00:03:30,970 And margin, right, say 16 pixels. 59 00:03:31,630 --> 00:03:32,650 Let's bring it down here. 60 00:03:33,430 --> 00:03:33,920 Let's say it. 61 00:03:34,720 --> 00:03:38,680 As you can see, we've got the same dog bar that we wanted to design. 62 00:03:39,270 --> 00:03:42,100 And that's how you use Flex to design Lautz. 63 00:03:43,400 --> 00:03:44,900 I hope you guys enjoyed this video. 64 00:03:45,410 --> 00:03:48,780 If you have any doubt, feel free to comment under we're discussing. 65 00:03:49,580 --> 00:03:50,570 See you in the next video. 66 00:03:50,750 --> 00:03:51,080 Bye. 67 00:03:51,200 --> 00:03:51,690 I'm Dick.