1 00:00:01,180 --> 00:00:01,720 ‫Hey, there. 2 00:00:01,840 --> 00:00:02,530 ‫Welcome back. 3 00:00:02,980 --> 00:00:08,620 ‫Now in this lecture, we are going to discuss about justified content as well as online content. 4 00:00:09,280 --> 00:00:17,470 ‫Now if you remember the Flexbox lecture, what they do and how they are dependent on access, for example, 5 00:00:17,830 --> 00:00:23,110 ‫if I want to add just any item horizontally, I'm going to utilize justified content. 6 00:00:23,560 --> 00:00:30,610 ‫And if I want to add just any item vertically, I'm going to utilize online content and head out flow 7 00:00:30,610 --> 00:00:32,260 ‫is remember role. 8 00:00:33,010 --> 00:00:34,990 ‫So let me analyze things. 9 00:00:35,050 --> 00:00:40,480 ‫One thing I'm going to do since currently we are utilizing one half hour, that means everything is 10 00:00:40,480 --> 00:00:41,380 ‫going to be smooth. 11 00:00:41,380 --> 00:00:47,560 ‫Everything is taking an entire space and we have no idea how we can manage them. 12 00:00:48,070 --> 00:00:56,320 ‫So, for example, if they are not utilizing a fire, for example, if I take maybe 100 Pixel four and 13 00:00:56,320 --> 00:01:02,890 ‫I can utilize repeat, the best use case here is an for column instead of this again. 14 00:01:03,160 --> 00:01:05,680 ‫One If I can utilize 100 pixels. 15 00:01:07,090 --> 00:01:08,110 ‫Save this one. 16 00:01:08,920 --> 00:01:11,800 ‫Now you can see how this is odd arrangement. 17 00:01:12,070 --> 00:01:15,760 ‫So basically, we are leaning towards the left side, and that's obvious. 18 00:01:16,480 --> 00:01:19,840 ‫One thing I should remove is this text align center. 19 00:01:20,410 --> 00:01:27,190 ‫I utilize this bar code demonstration, but now you can see this whole item thing is walking. 20 00:01:27,940 --> 00:01:30,580 ‫So everything is aligned towards the left side. 21 00:01:31,060 --> 00:01:33,280 ‫Now what justify content is going to do? 22 00:01:33,880 --> 00:01:39,640 ‫Remember, it is going to help to move odd elements all the time. 23 00:01:39,790 --> 00:01:47,560 ‫If I say justify content saying does everything horizontally will be sent that make get back here horizontally, 24 00:01:47,560 --> 00:01:48,820 ‫everything is saying that. 25 00:01:49,810 --> 00:01:50,710 ‫OK, great. 26 00:01:51,010 --> 00:01:57,730 ‫Now, head, if I try to increase the size of my this container, let see a hundred which. 27 00:01:58,820 --> 00:02:00,680 ‫So we have a lot of space. 28 00:02:01,160 --> 00:02:06,550 ‫And if I say maybe I can utilize other values, quite justify content for them all of us. 29 00:02:06,860 --> 00:02:08,610 ‫Maybe I can use stock. 30 00:02:08,870 --> 00:02:14,240 ‫Remember when we were walking Flexbox, it was Flagstar, but now it will be just stop. 31 00:02:14,420 --> 00:02:15,290 ‫Save this one. 32 00:02:15,710 --> 00:02:16,700 ‫It is that stark. 33 00:02:17,090 --> 00:02:19,910 ‫And if I go with end, it will be at the end. 34 00:02:21,220 --> 00:02:25,660 ‫Remember, everything is working fine, so let's keep this at this center. 35 00:02:27,480 --> 00:02:27,920 ‫Great. 36 00:02:28,020 --> 00:02:30,320 ‫Now this is done for horizontal bar. 37 00:02:30,700 --> 00:02:37,080 ‫I if I go with vertical bar, I have online content so I can utilize this online content. 38 00:02:37,560 --> 00:02:40,260 ‫And then if I see a center, it will be center. 39 00:02:40,470 --> 00:02:42,430 ‫You can see the center. 40 00:02:44,610 --> 00:02:48,510 ‫Now for better visualization that might change the rules, I 270. 41 00:02:52,230 --> 00:02:57,870 ‫And if I save this one, you can see now we have certain gaps on up as well as down. 42 00:02:58,470 --> 00:03:01,260 ‫So you can see how online content center. 43 00:03:01,560 --> 00:03:06,060 ‫And if I say and it will be at the end, you can see at the end. 44 00:03:06,570 --> 00:03:09,350 ‫And in this way, we can control everything. 45 00:03:09,360 --> 00:03:11,730 ‫Maybe I want my content on this site. 46 00:03:12,060 --> 00:03:18,570 ‫That means justify content will be at the end and allowing content will be at the end. 47 00:03:18,640 --> 00:03:19,530 ‫Save this one. 48 00:03:20,460 --> 00:03:22,440 ‫Hey, you can see that it is going to work. 49 00:03:22,890 --> 00:03:24,070 ‫I hope you got the idea. 50 00:03:24,100 --> 00:03:31,230 ‫Remember, everything is similar to Flexbox now, since we have justified content as well as online 51 00:03:31,230 --> 00:03:31,800 ‫content. 52 00:03:32,190 --> 00:03:35,790 ‫We also have justified them as a less Alleyne item. 53 00:03:36,240 --> 00:03:38,850 ‫Now, for now, let me get back to saying that had. 54 00:03:41,660 --> 00:03:47,510 ‫Now, the next time, just to buy item, as well as Alena, which is going to define these settings 55 00:03:47,510 --> 00:03:54,430 ‫related to whole aligning thing of this item, currently when we walk with justified content and item 56 00:03:54,440 --> 00:03:55,430 ‫block is moved. 57 00:03:55,760 --> 00:04:03,320 ‫But when we talk about justify items, the item, this whole item will move and then I can work with 58 00:04:03,590 --> 00:04:04,820 ‫individual item. 59 00:04:05,120 --> 00:04:12,980 ‫So remember, if I want to move this whole individual item, I can work with the help of self remember 60 00:04:12,980 --> 00:04:14,690 ‫to justify itself as well as I. 61 00:04:15,650 --> 00:04:18,260 ‫So how do I move horizontally? 62 00:04:18,260 --> 00:04:20,270 ‫I can say justify herself and I can. 63 00:04:20,270 --> 00:04:22,310 ‫You will center in back here. 64 00:04:22,640 --> 00:04:25,190 ‫You can see it center now on. 65 00:04:25,190 --> 00:04:26,930 ‫Maybe I want to move at the end. 66 00:04:27,440 --> 00:04:31,310 ‫Let me say at the end here, you can see it's move at the end. 67 00:04:31,850 --> 00:04:34,310 ‫Similarly, I can walk with this item. 68 00:04:34,310 --> 00:04:34,790 ‫Six. 69 00:04:37,300 --> 00:04:43,690 ‫Or what I want to demonstrate here is let me try to increase the size for the first one to 270. 70 00:04:44,440 --> 00:04:48,970 ‫So, OK, now if I want to move it at the bottom, I can utilize our line. 71 00:04:49,480 --> 00:04:56,260 ‫So all I have to do is utilize a line cell and that's it and save this one. 72 00:04:57,250 --> 00:05:00,340 ‫You can see this a move that maybe I want to move it here. 73 00:05:00,550 --> 00:05:01,540 ‫What I can do is. 74 00:05:02,580 --> 00:05:06,100 ‫Allowing Stark save this one. 75 00:05:06,120 --> 00:05:06,840 ‫Get back here. 76 00:05:07,200 --> 00:05:08,430 ‫Maybe at this center. 77 00:05:11,510 --> 00:05:12,260 ‫Directly. 78 00:05:14,940 --> 00:05:16,530 ‫Save the swan goodbye, cat. 79 00:05:16,590 --> 00:05:24,510 ‫OK, so that's how you can control the content, the individual item, as well as the entire block. 80 00:05:25,140 --> 00:05:30,420 ‫So I hope you got the idea how you are going to realize this justify content as well as online content. 81 00:05:31,140 --> 00:05:34,890 ‫Chances are you are not going to utilize every single thing, to be honest. 82 00:05:35,190 --> 00:05:36,690 ‫I just took an example. 83 00:05:36,690 --> 00:05:42,120 ‫So you have information, but at the time of designing, you are not going to utilise every single thing 84 00:05:42,360 --> 00:05:43,770 ‫since that tutorial. 85 00:05:44,100 --> 00:05:47,730 ‫That's why I'm trying to mess every single concept and single thing. 86 00:05:48,090 --> 00:05:50,520 ‫But in real life, you are not going to do that. 87 00:05:50,550 --> 00:05:51,810 ‫So don't worry about this. 88 00:05:52,260 --> 00:05:54,000 ‫If by chance, anything you missed. 89 00:05:54,360 --> 00:05:55,860 ‫Just watch the lecture again. 90 00:05:56,250 --> 00:05:57,910 ‫Or maybe just try to read it. 91 00:05:57,930 --> 00:05:59,130 ‫It's easy to do. 92 00:05:59,250 --> 00:06:02,490 ‫I will add some resources on your good friend. 93 00:06:02,580 --> 00:06:04,380 ‫Castex will help you. 94 00:06:04,920 --> 00:06:10,650 ‫We discussed all the topics that are covered inside this season, and if I missed any doing what it 95 00:06:10,650 --> 00:06:16,230 ‫can so that it's not important, you can just read it, or chances are it will something really to do 96 00:06:16,230 --> 00:06:20,250 ‫short end property that is going to mix, do things together or something else. 97 00:06:20,640 --> 00:06:24,720 ‫So I have covered most important things already, so don't worry about it. 98 00:06:25,670 --> 00:06:30,560 ‫That's all for this lecture, of course, as great as complete an hour in the next lecture, we are 99 00:06:30,560 --> 00:06:32,160 ‫going to do some practice session. 100 00:06:32,180 --> 00:06:36,830 ‫So you have clear information about everything that you just understood. 101 00:06:37,460 --> 00:06:40,180 ‫You can create the next lecture as a revision path. 102 00:06:40,760 --> 00:06:41,280 ‫That's all. 103 00:06:41,300 --> 00:06:43,010 ‫And I, you guys in the next one.