1 00:00:01,380 --> 00:00:01,920 ‫Hey, there. 2 00:00:02,040 --> 00:00:02,730 ‫Welcome back. 3 00:00:02,940 --> 00:00:07,760 ‫Now we are going to work with this new tool, which is known as Flexbox dark. 4 00:00:08,760 --> 00:00:14,010 ‫If this web site is available, make sure to jump on this website and then we are going to experiment 5 00:00:14,010 --> 00:00:15,180 ‫everything again. 6 00:00:15,780 --> 00:00:21,450 ‫Now, remember, chances are, by the time you are watching this lecture, this website is not available. 7 00:00:21,810 --> 00:00:23,040 ‫These are free websites. 8 00:00:23,040 --> 00:00:29,590 ‫Some users, there are different developers who created this for fun, and they tried Open-Source part 9 00:00:29,640 --> 00:00:31,290 ‫to run them on long term. 10 00:00:31,680 --> 00:00:34,650 ‫It's pretty difficult for several developers. 11 00:00:35,130 --> 00:00:39,730 ‫So if this is available, great, if not, we are going to test everything here. 12 00:00:39,750 --> 00:00:42,120 ‫You can understand things through video itself. 13 00:00:42,990 --> 00:00:47,220 ‫What I'm going to do is I have all these settings regarding my container. 14 00:00:48,610 --> 00:00:53,820 ‫So if you jump on the container side, you will see flexed addiction row, flex it out. 15 00:00:54,090 --> 00:01:01,390 ‫Nora Justify continuous flex start line items, flex start and then iron content flex stock. 16 00:01:01,750 --> 00:01:02,180 ‫OK. 17 00:01:02,200 --> 00:01:09,490 ‫What I'm going to do is I'm going to add or item or I should say five item at this point of time. 18 00:01:09,640 --> 00:01:13,210 ‫Since we don't have any drop, you can see we got a scroll. 19 00:01:13,420 --> 00:01:16,630 ‫So if I had a new item, you can see we have a scroll. 20 00:01:16,990 --> 00:01:24,120 ‫But as soon as I donned a setting to wrap, you can see now we have this item on the noodle. 21 00:01:24,520 --> 00:01:32,230 ‫If I try to decrease the size, you can see we are on inutile, so that's off Flex Stop is going to 22 00:01:32,230 --> 00:01:32,530 ‫work. 23 00:01:32,920 --> 00:01:37,360 ‫But then again, if I believe a few items, suppose we have these four items. 24 00:01:38,290 --> 00:01:42,970 ‫And if I try to play with the horizontal bar, I'm going to walk with just over my content. 25 00:01:43,960 --> 00:01:45,250 ‫Move towards the center. 26 00:01:45,400 --> 00:01:46,430 ‫OK, this is great. 27 00:01:46,720 --> 00:01:51,550 ‫And if I want to play with my vertical part, I'm going to use a line center. 28 00:01:52,530 --> 00:01:57,720 ‫Now here you can see lines and does not walking wire because we have selected the wrap, that means 29 00:01:57,720 --> 00:02:00,060 ‫we are still following that particular property. 30 00:02:00,390 --> 00:02:04,140 ‫So I need to go to Europe and then you can see a line 10 days walking. 31 00:02:04,620 --> 00:02:10,500 ‫Maybe I go, I want to go with straight, OK, it's walking, flexing Flagstar. 32 00:02:10,710 --> 00:02:12,600 ‫OK, everything is walking fine. 33 00:02:13,050 --> 00:02:14,870 ‫And then we have a line content. 34 00:02:15,270 --> 00:02:19,830 ‫No, again, I content is important when we want to shift this whole content. 35 00:02:20,220 --> 00:02:28,020 ‫So suppose here I have Flex Stop available and had I have more items, but if I want to move all of 36 00:02:28,020 --> 00:02:28,350 ‫them. 37 00:02:29,440 --> 00:02:32,440 ‫Down if I try to use this flex and. 38 00:02:35,510 --> 00:02:38,780 ‫And it will move the content individual element. 39 00:02:39,200 --> 00:02:45,530 ‫But if I want to just move this whole parent container down, what I am going to do is I'm going to 40 00:02:45,530 --> 00:02:50,920 ‫get into rehab and then I'm going to get into this whole online content. 41 00:02:50,930 --> 00:02:57,830 ‫And if I say Flex and I move this whole period content down, maybe I want to get into center. 42 00:02:59,070 --> 00:03:06,270 ‫Remember, I knew to be in a trap because without my means, I have robbed this whole items in a single 43 00:03:06,270 --> 00:03:06,720 ‫part. 44 00:03:08,510 --> 00:03:10,190 ‫And then I can move accordingly. 45 00:03:10,550 --> 00:03:16,430 ‫So if I go with space between, that means I have space between according to the horizontal way. 46 00:03:16,880 --> 00:03:22,970 ‫If I go with space around again, space around, according to the horizontal way, they remember this 47 00:03:22,970 --> 00:03:23,360 ‫point. 48 00:03:23,590 --> 00:03:29,450 ‫Main axis just back on then cross axes, a light item as well as aligned content. 49 00:03:30,230 --> 00:03:31,100 ‫This is great. 50 00:03:31,580 --> 00:03:36,710 ‫OK, let me go back to Flagstaff and again, I'm going to remove, no doubt. 51 00:03:37,080 --> 00:03:39,780 ‫Okay, so this is going to be like Start. 52 00:03:39,830 --> 00:03:41,930 ‫So that's how this is going to work. 53 00:03:42,560 --> 00:03:44,360 ‫Now this is all created. 54 00:03:44,370 --> 00:03:47,390 ‫Read our Flex Directioners row. 55 00:03:47,720 --> 00:03:51,290 ‫But what if I go with Flex Directions column? 56 00:03:52,160 --> 00:03:54,590 ‫Can I still apply all these properties? 57 00:03:54,920 --> 00:03:55,400 ‫Yes. 58 00:03:55,580 --> 00:03:58,850 ‫But the thing is, now all of them will reverse. 59 00:03:59,970 --> 00:04:06,180 ‫Remember the second part where we have column as vertical vertical is going to be main axis. 60 00:04:06,420 --> 00:04:14,640 ‫So now on main axes are to justify content is dependent and on cross axes, which is horizontal on a 61 00:04:14,640 --> 00:04:16,140 ‫line item is dependent. 62 00:04:16,470 --> 00:04:17,580 ‫Remember this point? 63 00:04:18,390 --> 00:04:19,740 ‫So what I'm going to do is. 64 00:04:21,690 --> 00:04:28,010 ‫I had if I jump on to a line item and if I say center, this will take this to saying that remember 65 00:04:28,010 --> 00:04:32,080 ‫if this was true, it will take to this and that here you can see this one. 66 00:04:32,290 --> 00:04:34,870 ‫And if this is column, this is going to take center. 67 00:04:35,590 --> 00:04:40,090 ‫So flag start will be this flex center will be this. 68 00:04:41,280 --> 00:04:45,420 ‫Flex and will be this four column. 69 00:04:45,720 --> 00:04:51,060 ‫OK, let me get back to Flex start now if I need to add some space in between them. 70 00:04:51,060 --> 00:04:54,330 ‫So I suppose if I have these three, only if I say. 71 00:04:55,440 --> 00:04:59,040 ‫Center, that means I'm moving this whole content center. 72 00:05:00,230 --> 00:05:07,250 ‫Space between I'm adding space between them and then space around again, all these properties are going 73 00:05:07,250 --> 00:05:08,060 ‫to remain the same. 74 00:05:08,630 --> 00:05:13,280 ‫So Flagstaff will take me at the Dog Flex and bake me at the bottom. 75 00:05:13,640 --> 00:05:15,320 ‫It might take only three elements. 76 00:05:15,350 --> 00:05:17,120 ‫You will get a better understanding. 77 00:05:20,170 --> 00:05:23,470 ‫Now, flexing to all the item will be at the center. 78 00:05:24,130 --> 00:05:27,730 ‫Remember when we were using just to buy content, we were playing horizontally. 79 00:05:27,910 --> 00:05:29,620 ‫Now we are playing vertically. 80 00:05:30,490 --> 00:05:34,000 ‫I hope now you get some basic understanding with this tool. 81 00:05:34,900 --> 00:05:40,660 ‫I strongly recommend you go visit this tool and then practice all the complete guides. 82 00:05:40,660 --> 00:05:43,780 ‫So basically you just need to perform on different properties. 83 00:05:44,710 --> 00:05:48,820 ‫Also, we can select any specific item and then change its property. 84 00:05:49,000 --> 00:05:50,320 ‫Remember what we did here? 85 00:05:51,100 --> 00:05:55,060 ‫So suppose if I want to change the order here, this is zero item. 86 00:05:55,060 --> 00:06:01,720 ‫If I say order as one, then it is going to move at the last Y because this is zero zero, then it is 87 00:06:01,720 --> 00:06:02,440 ‫going to be one. 88 00:06:03,280 --> 00:06:07,220 ‫Now maybe if I want to say flex growth to all of them. 89 00:06:07,240 --> 00:06:16,780 ‫So suppose let me offset flex grow as one, flex grow as one, as well as flex grows one. 90 00:06:17,320 --> 00:06:18,520 ‫All three are equal. 91 00:06:18,640 --> 00:06:24,220 ‫That means we have 100 percent space and we have divided 33, 33 33. 92 00:06:24,760 --> 00:06:33,130 ‫But suppose if I gave you here, that means I have 100 percent space and I have divided one portion 93 00:06:33,130 --> 00:06:35,500 ‫here, one portion here and two portion here. 94 00:06:35,980 --> 00:06:37,530 ‫That's how this is going to work. 95 00:06:41,160 --> 00:06:46,410 ‫Now headed by changes to law and try to understand the spark, so I have this. 96 00:06:47,010 --> 00:06:48,230 ‫Thirty three, thirty three. 97 00:06:48,760 --> 00:06:54,510 ‫Now if I change this to two, you can see it get more space. 98 00:06:54,690 --> 00:06:59,550 ‫So now we have some basic size to all of them and then we have maximum size to this. 99 00:07:00,150 --> 00:07:02,460 ‫So it's important for you to understand this part. 100 00:07:02,730 --> 00:07:08,100 ‫Now, if I try to do one simple thing, if I try to give it five, you can see it took some maximum 101 00:07:08,100 --> 00:07:08,490 ‫space. 102 00:07:09,330 --> 00:07:11,640 ‫Now, if I try to give, then you can see. 103 00:07:11,640 --> 00:07:14,340 ‫Still, I'm getting this maximum space only. 104 00:07:14,520 --> 00:07:15,000 ‫Why? 105 00:07:15,420 --> 00:07:21,630 ‫Because we are going to maintain the basic size of all the elements, even if I try to give 100 110. 106 00:07:23,730 --> 00:07:26,220 ‫You can see only small percentages increased. 107 00:07:26,640 --> 00:07:28,440 ‫So that's how this is going to work. 108 00:07:28,530 --> 00:07:29,880 ‫I hope you got the idea. 109 00:07:32,400 --> 00:07:37,650 ‫Again, you can walk with all the other properties, maybe you want to walk with disorder, you can 110 00:07:37,650 --> 00:07:41,010 ‫change the order to add we have zero one two. 111 00:07:41,460 --> 00:07:46,620 ‫That means this is the name and if I change this order to one, it will go at the last. 112 00:07:47,690 --> 00:07:51,560 ‫Or maybe if I let this one and change this to minus one. 113 00:07:52,820 --> 00:07:56,510 ‫You can see it comes a day for us because this is minus one zero one zero. 114 00:07:57,080 --> 00:07:58,910 ‫So that's how this is going to work. 115 00:08:00,890 --> 00:08:06,590 ‫Remember, when we are working with Flexbox, you don't need to understand everything, but you need 116 00:08:06,590 --> 00:08:08,570 ‫to understand the most common concept. 117 00:08:08,870 --> 00:08:09,650 ‫And that's it. 118 00:08:10,250 --> 00:08:16,130 ‫And this if you are clear with this concept, you will do 90 percent of the task on, I should say, 119 00:08:16,130 --> 00:08:17,780 ‫95 percent of the task. 120 00:08:18,680 --> 00:08:19,250 ‫That's it. 121 00:08:19,310 --> 00:08:20,430 ‫I hope you got the idea. 122 00:08:20,450 --> 00:08:22,210 ‫Maker of this tool is working walking. 123 00:08:22,460 --> 00:08:23,630 ‫This tool is available. 124 00:08:23,900 --> 00:08:27,800 ‫Make sure to jump on to this tool and try to experiment and stuff. 125 00:08:28,760 --> 00:08:32,330 ‫Thank you for calling, and in the next lecture, we are going to play our game. 126 00:08:32,510 --> 00:08:33,290 ‫Flexbox. 127 00:08:33,290 --> 00:08:33,800 ‫Suomi. 128 00:08:34,860 --> 00:08:36,150 ‫So that's all for this one. 129 00:08:36,210 --> 00:08:37,860 ‫And I see you guys in the next one.