1 00:00:01,060 --> 00:00:01,690 ‫Hey, there. 2 00:00:01,750 --> 00:00:02,440 ‫Welcome back. 3 00:00:03,310 --> 00:00:06,600 ‫Now in this lecture, let us continue our task with Flexbox. 4 00:00:07,120 --> 00:00:15,610 ‫First thing is I decreased the size of this box, as well as 10 different sizes just to discuss a few 5 00:00:15,610 --> 00:00:16,210 ‫other topics. 6 00:00:16,210 --> 00:00:19,390 ‫So I just make these bog smaller, nothing else. 7 00:00:20,050 --> 00:00:22,390 ‫So now let us understand about the other topics. 8 00:00:22,720 --> 00:00:25,450 ‫That means we are not scared about Flex collection. 9 00:00:25,450 --> 00:00:31,810 ‫You are not told about Flex Wrap, and we now have concept about what is main access and what is cross 10 00:00:31,810 --> 00:00:32,320 ‫axes. 11 00:00:33,130 --> 00:00:38,830 ‫Now there are few other properties that are included with this whole Flexbox container. 12 00:00:39,670 --> 00:00:47,320 ‫If you just scroll down a bit with the complete CCIs Flexbox guide, you will get information about 13 00:00:47,320 --> 00:00:48,550 ‫justified content. 14 00:00:48,820 --> 00:00:56,050 ‫So that means when we have multiple items, we can arrange them according to this piece that is available 15 00:00:56,050 --> 00:00:56,710 ‫on screen. 16 00:00:57,220 --> 00:01:06,790 ‫If I jump here and if I try to use justify content and if I assess center, save this one good market, 17 00:01:07,600 --> 00:01:10,270 ‫you can see all the items are in center. 18 00:01:10,810 --> 00:01:14,890 ‫Now there are few other properties by default towards the flex start. 19 00:01:15,370 --> 00:01:22,300 ‫So if I just get back here, use Flex Start, that means I'm going to start from the left hand side 20 00:01:22,780 --> 00:01:24,970 ‫if I go flex and. 21 00:01:26,360 --> 00:01:32,180 ‫That means I'm going to just move towards the end anuses, remember, I'm shifting all the elements 22 00:01:32,180 --> 00:01:35,630 ‫as it does, I'm not moving the number one hand, moving the number two. 23 00:01:35,810 --> 00:01:40,490 ‫Ah, no, I'm moving this whole part on the right side. 24 00:01:41,570 --> 00:01:43,670 ‫Now we have other properties like center. 25 00:01:43,940 --> 00:01:46,220 ‫Then there is space between what it is. 26 00:01:46,580 --> 00:01:49,160 ‫It will have some space between all the elements. 27 00:01:55,920 --> 00:01:57,490 ‫You can see this is item one. 28 00:01:57,510 --> 00:02:04,920 ‫Then some space item to some space item three, some space for some space and five, then we have other 29 00:02:04,920 --> 00:02:06,510 ‫properties like space around. 30 00:02:06,870 --> 00:02:11,250 ‫So that will add some space on the left margin as well as on the right margin. 31 00:02:11,730 --> 00:02:12,160 ‫OK. 32 00:02:12,180 --> 00:02:12,900 ‫Let us try. 33 00:02:13,170 --> 00:02:15,540 ‫So that will be space around. 34 00:02:17,770 --> 00:02:18,580 ‫Get back here. 35 00:02:20,010 --> 00:02:21,100 ‫There is some space. 36 00:02:21,370 --> 00:02:21,930 ‫Space. 37 00:02:23,310 --> 00:02:27,540 ‫What each element, but obviously there is more space between these elements. 38 00:02:27,840 --> 00:02:31,620 ‫What I can do is I can utilize space evenly. 39 00:02:32,250 --> 00:02:33,210 ‫Save this one. 40 00:02:33,240 --> 00:02:34,020 ‫Get back here. 41 00:02:34,560 --> 00:02:37,080 ‫Now I have even space on all Typekit. 42 00:02:37,740 --> 00:02:42,450 ‫Now, if I try to decrease the size, you can see they are squeezing a member of properly. 43 00:02:42,450 --> 00:02:46,140 ‫We can use all I crew uses Flex Wrap. 44 00:02:47,530 --> 00:02:53,350 ‫And I'm going to go, Rob, save this one and get back here now if I try to squeeze them. 45 00:02:53,680 --> 00:02:54,310 ‫You can see. 46 00:02:55,780 --> 00:03:03,770 ‫They are following the real property as well as they are following Justify as spaced evenly. 47 00:03:04,360 --> 00:03:07,030 ‫So if I just decrease their size. 48 00:03:08,990 --> 00:03:13,160 ‫You can see they are following this space property for the next row as well. 49 00:03:14,150 --> 00:03:15,620 ‫That's how this is going to work. 50 00:03:16,040 --> 00:03:17,540 ‫Now one important thing. 51 00:03:19,480 --> 00:03:25,630 ‫This justifies saying that is pretty much the most important thing that you are going to utilize in 52 00:03:25,630 --> 00:03:26,710 ‫several projects. 53 00:03:26,920 --> 00:03:27,370 ‫Why? 54 00:03:27,760 --> 00:03:34,840 ‫Because it's a shortcut to get your item a line in the center and doing this with other things like 55 00:03:34,840 --> 00:03:40,000 ‫doing this with blog or doing this with any other method going to take some CSIS knowledge. 56 00:03:40,300 --> 00:03:46,960 ‫If you see we utilize margin auto when we were working with blog also when we were walking with fixed 57 00:03:46,960 --> 00:03:49,870 ‫fee utilized, fixed align, then center. 58 00:03:50,110 --> 00:03:52,110 ‫So this is like a shortcut. 59 00:03:52,120 --> 00:03:59,470 ‫You are going to get into container, add display flex and then add justified content saying that and 60 00:03:59,470 --> 00:04:01,330 ‫you are going to get everything at center. 61 00:04:03,560 --> 00:04:11,150 ‫Remember, you have option to specify different mediums like space between around or space evenly. 62 00:04:12,520 --> 00:04:13,480 ‫This looks fine. 63 00:04:13,990 --> 00:04:15,650 ‫Now we have some other properties. 64 00:04:15,670 --> 00:04:18,700 ‫If I scroll down a bit, you will see item online. 65 00:04:19,450 --> 00:04:24,890 ‫Remember, I discussed about the margins mean cross. 66 00:04:24,910 --> 00:04:25,510 ‫Remember? 67 00:04:28,060 --> 00:04:35,440 ‫So at this point of time, this just if I can take, was helping us with this main axis, if we see 68 00:04:35,830 --> 00:04:41,650 ‫we were able to define all types of properties, but they were dependent on demand access. 69 00:04:41,690 --> 00:04:44,020 ‫So if I use space around. 70 00:04:45,680 --> 00:04:48,980 ‫Everything will happen on the main axis itself. 71 00:04:49,520 --> 00:04:53,060 ‫But if I start working with, I don't align. 72 00:04:53,510 --> 00:04:59,300 ‫This will control things on the horizontal axis, which is cross axes. 73 00:04:59,870 --> 00:05:05,840 ‫So if I jump here, we have properties like Flex Start, that means everything will be at the top. 74 00:05:06,710 --> 00:05:10,610 ‫Then we have flex, and that means everything will be at the end of debate. 75 00:05:11,300 --> 00:05:12,740 ‫Then we have fake center. 76 00:05:13,100 --> 00:05:15,170 ‫Everything will be in the center. 77 00:05:15,620 --> 00:05:16,790 ‫Then we have stretch. 78 00:05:16,790 --> 00:05:20,390 ‫Then all the items will stretch and then we have baseline. 79 00:05:20,390 --> 00:05:26,510 ‫That means if there is any item big, if there is any item small, any type of item, they will align 80 00:05:26,510 --> 00:05:28,010 ‫according to their best size. 81 00:05:28,940 --> 00:05:30,650 ‫OK, let's try this one also. 82 00:05:30,860 --> 00:05:35,810 ‫So the first thing I'm going to do is I'm going to add some size to my container at this point of time. 83 00:05:35,810 --> 00:05:40,130 ‫My container is small and dependent on these item itself. 84 00:05:40,580 --> 00:05:46,610 ‫So I suppose my container is let me be height as seven edge. 85 00:05:46,820 --> 00:05:47,720 ‫Save this one. 86 00:05:49,040 --> 00:05:54,860 ‫OK, now we can understand all these concepts and also try to change the size of at least one item. 87 00:05:55,250 --> 00:06:01,160 ‫So let me use height and what I the height of maybe a country. 88 00:06:01,640 --> 00:06:04,250 ‫And let's say this is 150 pixels. 89 00:06:07,310 --> 00:06:09,740 ‫OK, now we can understand things better. 90 00:06:10,490 --> 00:06:16,340 ‫So the first one I'm going to try is a line item, and I'm going to try with Flex stock, which is the 91 00:06:16,340 --> 00:06:17,090 ‫default one. 92 00:06:17,660 --> 00:06:24,410 ‫So what I'm going to do is remember, this is going to work with our container that is on patent glass 93 00:06:24,410 --> 00:06:24,920 ‫itself. 94 00:06:25,640 --> 00:06:28,910 ‫So what I'm going to use is a line items. 95 00:06:29,330 --> 00:06:32,060 ‫And here we have multiple option. 96 00:06:32,600 --> 00:06:35,480 ‫By default, we are going to start with flex time. 97 00:06:35,690 --> 00:06:36,500 ‫Save this one. 98 00:06:37,460 --> 00:06:39,200 ‫Things are going to remain as it is. 99 00:06:39,230 --> 00:06:41,900 ‫Remember, I have removed Justify saying that. 100 00:06:42,930 --> 00:06:47,820 ‫You can apply both properties, don't worry, you can apply them together, but I want to discuss about 101 00:06:47,820 --> 00:06:48,630 ‫this whole part. 102 00:06:49,080 --> 00:06:55,200 ‫So this is flex start and then we have Flex, and that means everything will be at the bottom. 103 00:06:55,650 --> 00:06:59,320 ‫So what I'm going to do is utilize flex and save this one. 104 00:06:59,340 --> 00:07:00,090 ‫Get back here. 105 00:07:00,510 --> 00:07:01,110 ‫You can see. 106 00:07:01,620 --> 00:07:02,730 ‫Then we have center. 107 00:07:06,910 --> 00:07:07,900 ‫Looks fine to me. 108 00:07:08,410 --> 00:07:09,990 ‫Let me get back, OK? 109 00:07:10,060 --> 00:07:11,890 ‫This is how center is going to work. 110 00:07:12,370 --> 00:07:13,480 ‫Then we have stretch. 111 00:07:13,490 --> 00:07:16,390 ‫That means each item will be stretched out. 112 00:07:19,460 --> 00:07:20,660 ‫So if I get back here. 113 00:07:22,000 --> 00:07:24,100 ‫Rate us again, why this is not looking. 114 00:07:24,700 --> 00:07:26,860 ‫Well, we have to find individual size. 115 00:07:27,030 --> 00:07:32,830 ‫So if I remove this one, save this one and get back in, you can see all of them are stretch, except 116 00:07:32,830 --> 00:07:34,930 ‫this one because we have our height here. 117 00:07:36,510 --> 00:07:38,550 ‫So that's a stretch is going to work. 118 00:07:38,580 --> 00:07:40,860 ‫It stretches all the item. 119 00:07:41,840 --> 00:07:43,760 ‫Now, the next one is about baseline. 120 00:07:43,970 --> 00:07:49,490 ‫If I jump back here and if I remove the height of the third element itself. 121 00:07:51,240 --> 00:07:56,850 ‫And if I just remotely stretch itself safe, is he by default also they are in this room? 122 00:07:57,630 --> 00:08:01,050 ‫What I can do is if I use baseline, save this one. 123 00:08:03,400 --> 00:08:06,700 ‫And here you can see they are dependent on their content now. 124 00:08:08,710 --> 00:08:12,600 ‫Remember, one important thing, we haven't added height to any element. 125 00:08:12,990 --> 00:08:14,670 ‫So if I remove this baseline? 126 00:08:15,990 --> 00:08:16,920 ‫Save this one. 127 00:08:17,400 --> 00:08:18,690 ‫They are again stretched. 128 00:08:22,590 --> 00:08:27,700 ‫So you need to keep this in mind when you want to align according to the baseline of the items. 129 00:08:27,990 --> 00:08:29,430 ‫Then this is going to work. 130 00:08:30,000 --> 00:08:34,740 ‫OK, let me get back to Flex stock and see if this one. 131 00:08:36,340 --> 00:08:38,260 ‫And I also need to add the height again. 132 00:08:43,030 --> 00:08:49,390 ‫So I hope you got the idea, how this aligned content, what we try to add content at the top, then 133 00:08:49,390 --> 00:08:51,250 ‫at the bottom, then at the center. 134 00:08:51,400 --> 00:08:54,340 ‫So we were working with the world equal access. 135 00:08:55,360 --> 00:08:57,400 ‫That means cross access in this case. 136 00:08:57,730 --> 00:09:02,350 ‫And when we are working with just to buy content, we are working with the horizontal axis. 137 00:09:03,550 --> 00:09:09,550 ‫So that's all for this lecture now in the next one, we're also going to discuss about certain properties 138 00:09:09,700 --> 00:09:11,800 ‫that are related to the items. 139 00:09:12,070 --> 00:09:17,400 ‫So in this one, we were focused with the properties related to container in the next one. 140 00:09:17,410 --> 00:09:22,360 ‫Let us also discuss about the properties related to item and then mixed both of them. 141 00:09:22,720 --> 00:09:24,340 ‫I hope this lecture was helpful. 142 00:09:24,580 --> 00:09:25,600 ‫Thank you for calling. 143 00:09:25,750 --> 00:09:27,640 ‫And I see you guys in the next one.