1 00:00:00,800 --> 00:00:01,460 ‫Hey, there. 2 00:00:01,610 --> 00:00:07,910 ‫Welcome back, Siobhan, the site now in this lecture, we are going to play a game known as Flexbox 3 00:00:07,910 --> 00:00:08,510 ‫Froggy. 4 00:00:09,350 --> 00:00:14,870 ‫So basically we have frogs, different frogs as we go and move forward with this section. 5 00:00:15,140 --> 00:00:20,360 ‫We have this pond and we need to move this frog to its respective position. 6 00:00:20,870 --> 00:00:24,140 ‫And for this, we need to write some code. 7 00:00:24,770 --> 00:00:28,910 ‫So there are certain information about each level is that we are going to play. 8 00:00:29,180 --> 00:00:31,400 ‫And currently we have 24 levels. 9 00:00:32,180 --> 00:00:36,620 ‫So all of this should within Boltons be understood about Flexbox thoroughly. 10 00:00:37,460 --> 00:00:41,600 ‫The first thing I'm going to do is here we have this pairing with this pond. 11 00:00:42,290 --> 00:00:44,390 ‫We have our display proper duplex. 12 00:00:44,630 --> 00:00:46,340 ‫Everything is default rate. 13 00:00:46,340 --> 00:00:50,180 ‫And yet all we need to do is write some more property. 14 00:00:50,510 --> 00:00:52,400 ‫So this frog will move here. 15 00:00:53,120 --> 00:00:54,110 ‫It should be simple. 16 00:00:54,260 --> 00:00:57,080 ‫We are starting from Flex stock. 17 00:00:57,470 --> 00:00:59,500 ‫I just need to move this to flex. 18 00:00:59,510 --> 00:01:04,160 ‫And so what I'm going to do is I quickly realized just if I wanted. 19 00:01:08,550 --> 00:01:11,160 ‫And I'm going to utilize Flex and. 20 00:01:13,150 --> 00:01:14,500 ‫You can see now I am here. 21 00:01:14,650 --> 00:01:15,310 ‫That's fun. 22 00:01:15,730 --> 00:01:16,480 ‫Click on Next. 23 00:01:18,550 --> 00:01:20,920 ‫Now again, we have our brand new challenges. 24 00:01:21,220 --> 00:01:25,210 ‫You can click here to see if your challenges complete, Wangari said. 25 00:01:25,210 --> 00:01:27,630 ‫I want to move to any specific challenge. 26 00:01:27,640 --> 00:01:32,080 ‫You can do that, but I strongly recommend to move forward one by one. 27 00:01:32,680 --> 00:01:34,360 ‫Let's try to complete this one. 28 00:01:34,750 --> 00:01:35,560 ‫We have this one. 29 00:01:35,560 --> 00:01:36,600 ‫We need to move here. 30 00:01:36,970 --> 00:01:38,590 ‫Remember just to buy a center. 31 00:01:38,920 --> 00:01:43,440 ‫So what I'm going to do is I'm going to jump ahead and utilize Justify center. 32 00:01:43,860 --> 00:01:48,640 ‫Also, you can read about each one of them had some hands out orders. 33 00:01:48,760 --> 00:01:50,110 ‫See all the information. 34 00:01:50,620 --> 00:01:51,400 ‫Click on Next. 35 00:01:54,490 --> 00:01:58,030 ‫So now we have three Joel, and this is our parent container. 36 00:01:58,210 --> 00:02:04,780 ‫And this is each individual item, justify content and then we can drive a species. 37 00:02:05,260 --> 00:02:10,780 ‫So I have to do is use just to buy content and then let me drive private space around. 38 00:02:13,000 --> 00:02:16,990 ‫Since here, the space is not even then, it should be space around itself. 39 00:02:17,470 --> 00:02:18,310 ‫They go next. 40 00:02:21,250 --> 00:02:24,490 ‫And then here again, I'm going to the nice, justified content. 41 00:02:26,330 --> 00:02:32,870 ‫And remember, you don't need to remember all values you can jump on to this Flexbox guide, scroll 42 00:02:32,870 --> 00:02:37,640 ‫down to justify content and see all day back values here. 43 00:02:37,640 --> 00:02:40,820 ‫In this one, I'm going to utilize web space between. 44 00:02:42,320 --> 00:02:45,230 ‫So what I'm going to do is I'm going to utilize space. 45 00:02:48,470 --> 00:02:49,820 ‫And this worked fine. 46 00:02:50,270 --> 00:02:51,020 ‫They're going next. 47 00:02:53,770 --> 00:02:55,540 ‫OK, now things are changing. 48 00:02:55,570 --> 00:02:59,590 ‫We are going to work with horizontal axes, we have aligned items. 49 00:03:00,010 --> 00:03:04,630 ‫So what I'm going to do is and I need to use a line item by default. 50 00:03:04,630 --> 00:03:08,350 ‫It is Flex Dot and I need to move it to flex and. 51 00:03:12,530 --> 00:03:12,970 ‫OK. 52 00:03:13,010 --> 00:03:14,960 ‫This won't train next level. 53 00:03:17,760 --> 00:03:21,870 ‫This time we are going to work with both horizontal as well as what we call. 54 00:03:22,620 --> 00:03:26,310 ‫So the first property that I'm going to apply will be just if I can turn. 55 00:03:28,990 --> 00:03:34,420 ‫And head, I'm going to move towards center, the next property I'm going to apply is going to be a 56 00:03:34,420 --> 00:03:35,290 ‫line items. 57 00:03:36,850 --> 00:03:39,200 ‫And head on, so I'm going to move towards center. 58 00:03:39,790 --> 00:03:41,500 ‫Hey, you can see it's worked fine. 59 00:03:42,040 --> 00:03:42,760 ‫Next level. 60 00:03:45,140 --> 00:03:51,740 ‫Now here, this looks interesting, I have to move all these three towards, and that is flexing with 61 00:03:51,770 --> 00:03:55,730 ‫Elaina items and then justify content to distribute them. 62 00:04:03,860 --> 00:04:09,560 ‫Now here, if you don't know what value you apply, you can always jump onto the guide and see different 63 00:04:09,560 --> 00:04:10,100 ‫values. 64 00:04:10,610 --> 00:04:12,500 ‫Here you can try about space around. 65 00:04:17,710 --> 00:04:19,300 ‫And it was fine. 66 00:04:19,810 --> 00:04:21,640 ‫Let me get on to the next level. 67 00:04:24,140 --> 00:04:28,760 ‫OK, you need to move here, but we need to move in a reverse direction. 68 00:04:29,180 --> 00:04:36,980 ‫So the best thing is instead of using justify content, we are going to utilize flex direction as drivers 69 00:04:36,980 --> 00:04:39,230 ‫because we are going to reverse content. 70 00:04:40,130 --> 00:04:44,630 ‫Green, yellow and red is the direction we want here red, yellow and green. 71 00:04:45,110 --> 00:04:48,410 ‫So what I'm going to do is I'm going to realize flex direction. 72 00:04:50,990 --> 00:04:56,450 ‫Also, you can see the clue here, so Flextronics addiction, maybe Rory was. 73 00:04:59,630 --> 00:05:00,660 ‫This worked fine. 74 00:05:00,680 --> 00:05:01,160 ‫Next. 75 00:05:04,370 --> 00:05:07,220 ‫Well, this looks simple flextime action column. 76 00:05:14,060 --> 00:05:15,440 ‫Let us move to next level. 77 00:05:17,850 --> 00:05:19,260 ‫Now, this looks interesting. 78 00:05:19,500 --> 00:05:22,860 ‫What we can do is we can force reverse their direction. 79 00:05:23,160 --> 00:05:29,520 ‫So what I'm going to utilize is flex direction and I'm going to call this as Drew reversed. 80 00:05:32,110 --> 00:05:39,690 ‫Now, utilizing the if I can, I can move this here, remember to justify content, also oppose it once 81 00:05:39,700 --> 00:05:41,920 ‫field lives flex direction. 82 00:05:42,340 --> 00:05:46,120 ‫So that means video with simple rule. 83 00:05:46,270 --> 00:05:50,110 ‫It was here to here, but now draw reverse. 84 00:05:50,110 --> 00:05:51,730 ‫It goes from here to here. 85 00:05:52,120 --> 00:05:54,690 ‫That means the direction of accessing it. 86 00:05:54,940 --> 00:05:56,770 ‫You are walking with minoxidil only. 87 00:05:56,800 --> 00:05:58,270 ‫But the direction has changed. 88 00:05:58,780 --> 00:06:06,820 ‫So what I'm going to do is I'm going to utilize justify content and this will be flex and the cause 89 00:06:06,830 --> 00:06:09,760 ‫for reverse flex starts from here. 90 00:06:13,510 --> 00:06:14,620 ‫This worked fine. 91 00:06:14,890 --> 00:06:16,630 ‫It does move on to the next level. 92 00:06:18,830 --> 00:06:20,270 ‫OK, this looks interesting. 93 00:06:20,570 --> 00:06:26,510 ‫The first thing is we need to convert into column, so I'm going to realize flex direction. 94 00:06:27,260 --> 00:06:28,520 ‫And this is going to be. 95 00:06:29,870 --> 00:06:30,060 ‫On. 96 00:06:31,760 --> 00:06:34,340 ‫Now we just need to move it horizontally down. 97 00:06:34,790 --> 00:06:40,790 ‫Remember one thing now we cannot utilize alienate dumps, why we are in the column stage. 98 00:06:40,790 --> 00:06:41,960 ‫So if you get back here. 99 00:06:43,490 --> 00:06:45,700 ‫And we are in column that means the call. 100 00:06:45,740 --> 00:06:47,150 ‫So this is mean access. 101 00:06:47,240 --> 00:06:52,790 ‫Here we are going to utilize justified content for cross axes are line items. 102 00:06:54,920 --> 00:06:59,720 ‫So that means to move it down, we are going to utilize justify content. 103 00:07:01,490 --> 00:07:03,980 ‫And this is going to be legs and. 104 00:07:07,080 --> 00:07:12,360 ‫Worked fine, remember Vietnam columns so horizontal well, we worked with justifier content. 105 00:07:14,340 --> 00:07:16,710 ‫Great, now we are at level 12. 106 00:07:17,280 --> 00:07:22,950 ‫So first thing, let us convert it into columns, I'm going to utilize flex direction and I'm going 107 00:07:22,950 --> 00:07:24,420 ‫to change it to column. 108 00:07:26,490 --> 00:07:27,400 ‫Austin is done. 109 00:07:27,420 --> 00:07:28,830 ‫I just need to reverse it. 110 00:07:30,390 --> 00:07:34,560 ‫So here, instead of any second property, I can just use reverse. 111 00:07:35,830 --> 00:07:36,980 ‫OK, this looks fine. 112 00:07:37,000 --> 00:07:39,400 ‫Now I need to add some space in between them. 113 00:07:39,580 --> 00:07:42,930 ‫I can utilize justified content. 114 00:07:43,360 --> 00:07:49,390 ‫So just to buy content that should be a jump shared space between, I guess. 115 00:07:54,320 --> 00:07:55,230 ‫Worked fine. 116 00:07:55,810 --> 00:07:56,920 ‫Get back to next one. 117 00:07:59,460 --> 00:08:05,140 ‫OK, so we need to get in to saying that also, we need to get in to the end, quite simple. 118 00:08:05,160 --> 00:08:11,040 ‫What I'm going to do is since we need to change direction, so I'm going to use a reverse. 119 00:08:14,640 --> 00:08:17,580 ‫My order works because I need an opposite direction. 120 00:08:20,740 --> 00:08:26,500 ‫Once that is done, I want to bring them at this center, so I'm going to use justify content. 121 00:08:31,680 --> 00:08:34,510 ‫Once that is done, I just need to take them at the bottom. 122 00:08:34,530 --> 00:08:37,380 ‫That means I'm going to utilize Flex and. 123 00:08:41,920 --> 00:08:42,870 ‫It worked fine. 124 00:08:43,080 --> 00:08:44,340 ‫Just move on to the next one. 125 00:08:47,150 --> 00:08:50,630 ‫OK, this is interesting, so we are with orders now. 126 00:08:50,960 --> 00:08:53,420 ‫What we have to do is change the order of the law. 127 00:08:53,750 --> 00:08:56,910 ‫At this point of time, this is zero, this is zero zero. 128 00:08:56,960 --> 00:09:03,650 ‫So if I want to hold this at the end, all I have to do is change this to one or anything that is greater 129 00:09:03,650 --> 00:09:04,250 ‫than zero. 130 00:09:06,360 --> 00:09:08,670 ‫Well, fine, let's move on to the next level. 131 00:09:11,520 --> 00:09:16,040 ‫OK, so here we have certain other changes I want to move this at. 132 00:09:16,510 --> 00:09:17,970 ‫So all of them are zero. 133 00:09:18,330 --> 00:09:22,530 ‫If I want to move at the first, what I can do is I can go one minus one. 134 00:09:27,200 --> 00:09:29,570 ‫Well, fine, let's move on to the next one. 135 00:09:32,270 --> 00:09:33,440 ‫OK, this should be simple. 136 00:09:33,470 --> 00:09:36,500 ‫All I have to do is just move this item at the bottom. 137 00:09:36,830 --> 00:09:42,380 ‫So what I'm going to do is since this is an individual item, I have a line self. 138 00:09:44,430 --> 00:09:50,640 ‫But if this was better, I am won't be utilized, I line items, but this is individual item. 139 00:09:51,420 --> 00:09:54,570 ‫So that means I'm going to go with Flex and. 140 00:09:56,440 --> 00:09:57,190 ‫Worked fine. 141 00:09:57,320 --> 00:09:58,750 ‫Let us move on to the next one. 142 00:10:01,340 --> 00:10:08,570 ‫OK, so what we have to do is we need to work with these individual element so I can directly select 143 00:10:08,570 --> 00:10:08,900 ‫them. 144 00:10:08,940 --> 00:10:12,740 ‫The first thing I'm going to do is I'm going to order them. 145 00:10:12,960 --> 00:10:16,460 ‫I'm going to order them greater than zero if I can have both of them at the end. 146 00:10:16,910 --> 00:10:18,380 ‫So I'm going to say, or no one. 147 00:10:19,100 --> 00:10:24,920 ‫All of them are orders, you know, and this is one and one, and then I can utilize our line self. 148 00:10:29,970 --> 00:10:32,100 ‫So basically, I need to go with flexing. 149 00:10:35,850 --> 00:10:36,750 ‫It's worked fine. 150 00:10:36,840 --> 00:10:38,010 ‫Move on to the next one. 151 00:10:41,050 --> 00:10:43,660 ‫OK, this looks pretty problem. 152 00:10:44,170 --> 00:10:50,170 ‫But remember, if we have Flex Wrap, we can do something, so all I have to do is use Flex Adam. 153 00:10:51,040 --> 00:10:55,690 ‫And since we are following Nora by default, I can use Rob. 154 00:10:56,850 --> 00:10:58,710 ‫And things are much easier now. 155 00:10:59,010 --> 00:11:00,150 ‫We want the next one. 156 00:11:02,920 --> 00:11:04,420 ‫OK, this is a big mess. 157 00:11:05,020 --> 00:11:10,860 ‫First thing, my plan is to go with column and then utilize that part. 158 00:11:11,350 --> 00:11:14,020 ‫So I'm going to utilize flex direction. 159 00:11:18,240 --> 00:11:24,240 ‫Now we have column, what we can do is we can utilize the app so it will be distributed automatically. 160 00:11:28,280 --> 00:11:29,320 ‫OK, fine. 161 00:11:33,000 --> 00:11:34,890 ‫OK, this looks exactly the same. 162 00:11:34,920 --> 00:11:40,950 ‫The only difference is this time we need to utilize flex flow and we need to combine both the properties 163 00:11:40,950 --> 00:11:43,200 ‫that we did in the previous challenge. 164 00:11:43,800 --> 00:11:45,930 ‫So just use flex flow. 165 00:11:46,860 --> 00:11:48,840 ‫And how we need to pass them. 166 00:11:49,980 --> 00:11:51,130 ‫And then dropped. 167 00:11:52,510 --> 00:11:52,970 ‫OK. 168 00:11:53,030 --> 00:11:53,710 ‫OK, fine. 169 00:11:57,470 --> 00:12:02,570 ‫Now, things are going interesting at this point of time, they are flex and then they are out, so 170 00:12:02,570 --> 00:12:04,970 ‫we have these three distributed rows. 171 00:12:05,570 --> 00:12:11,140 ‫What I want is I want to move them together, so we have some space with them. 172 00:12:11,150 --> 00:12:12,560 ‫I can reduce that on. 173 00:12:12,560 --> 00:12:15,230 ‫I have two uses online content. 174 00:12:18,010 --> 00:12:25,150 ‫And then I can just remove their spirits, I can just say Flex starts work fine. 175 00:12:27,970 --> 00:12:31,660 ‫Remember, you can test it out here, so I suppose if I delete all of them. 176 00:12:32,830 --> 00:12:34,900 ‫And if I add new item. 177 00:12:38,170 --> 00:12:45,100 ‫Now, I heard if I want to add spaces between them, I can utilize online content and then add some 178 00:12:45,100 --> 00:12:47,260 ‫space or move them accordingly. 179 00:12:47,590 --> 00:12:51,070 ‫You can see storage space between space around. 180 00:12:52,270 --> 00:12:53,770 ‫And we can do a lot of things. 181 00:12:56,340 --> 00:13:02,830 ‫Get back to our next challenge, which is 22 now here we have this. 182 00:13:02,850 --> 00:13:05,490 ‫What we have to do is just move this down. 183 00:13:06,030 --> 00:13:09,750 ‫So what I'm going to do is I'm going to utilize online content. 184 00:13:11,580 --> 00:13:13,830 ‫And there should be Flex and. 185 00:13:15,390 --> 00:13:16,200 ‫Worked fine. 186 00:13:19,110 --> 00:13:21,790 ‫OK, this looks tricky, but I get it. 187 00:13:21,810 --> 00:13:24,330 ‫We just need to do it in simple words. 188 00:13:24,630 --> 00:13:28,770 ‫So if I need to do some rotation, I'm going to go with flex direction. 189 00:13:31,460 --> 00:13:36,260 ‫With the rotation, I mean, I need this line at the top, then all of them at the middle and this line 190 00:13:36,260 --> 00:13:36,950 ‫at the bottom. 191 00:13:37,550 --> 00:13:41,780 ‫So I should go with column first and see what result I'm going to get. 192 00:13:43,120 --> 00:13:44,000 ‫Column is okay. 193 00:13:44,020 --> 00:13:47,260 ‫That means I just needed to reverse the column reverse. 194 00:13:48,470 --> 00:13:48,830 ‫OK. 195 00:13:48,860 --> 00:13:54,820 ‫This worked fine, and then I just need to change their spacing, so I'm going to utilize online content. 196 00:13:56,320 --> 00:13:57,950 ‫And I need to change the space. 197 00:13:57,970 --> 00:13:59,680 ‫I'm going to call it center. 198 00:14:00,590 --> 00:14:01,870 ‫OK, I'm fine. 199 00:14:05,500 --> 00:14:08,290 ‫The final level looks difficult, actually. 200 00:14:08,440 --> 00:14:14,350 ‫So the first thing I'm going to do is I need to get it in the column form and then reverse it. 201 00:14:14,620 --> 00:14:15,640 ‫That's the first stage. 202 00:14:16,240 --> 00:14:18,880 ‫So I'm going to change flex direction. 203 00:14:24,240 --> 00:14:25,470 ‫Negative force change. 204 00:14:25,500 --> 00:14:27,240 ‫Then I'm going to add wrap. 205 00:14:30,540 --> 00:14:34,020 ‫Since I don't want everything to be squeezed in one line. 206 00:14:37,280 --> 00:14:38,600 ‫We got the second change. 207 00:14:39,110 --> 00:14:41,780 ‫But then I want to move it in a reverse direction. 208 00:14:43,000 --> 00:14:45,580 ‫So I can go with a line condemned. 209 00:14:47,190 --> 00:14:49,560 ‫And go with Flex and. 210 00:14:51,520 --> 00:14:57,010 ‫OK, this works fine, what I'm going to do is I'm going to wrap reverse so I can get two of them had. 211 00:14:57,950 --> 00:14:59,840 ‫Strap her a worse. 212 00:15:04,840 --> 00:15:11,010 ‫OK, so I don't need to use Flex, and no, because of the wrap, it was this looks fine. 213 00:15:11,020 --> 00:15:18,580 ‫The only thing I need to go with is I need to add some here, which is I need to change the property 214 00:15:18,580 --> 00:15:18,790 ‫here. 215 00:15:18,790 --> 00:15:20,620 ‫I need to add spaces between them. 216 00:15:20,890 --> 00:15:25,480 ‫So I'm going to use what are the properties of content which is space between. 217 00:15:29,800 --> 00:15:30,560 ‫Okay. 218 00:15:30,730 --> 00:15:35,000 ‫But I need to move them up, so this is horizontal. 219 00:15:35,020 --> 00:15:36,580 ‫I just need to move them up. 220 00:15:42,630 --> 00:15:45,040 ‫I can utilize just if I condensate. 221 00:15:46,010 --> 00:15:52,620 ‫That said, also you can utilize flex flow to grab them together, that means to have both values together 222 00:15:52,620 --> 00:15:53,190 ‫and sense. 223 00:15:55,130 --> 00:16:02,630 ‫Dodd said we have completed only 24 levels, and I hope now you have ideas about how this Flexbox groggy 224 00:16:02,630 --> 00:16:05,330 ‫walk and also how this Flexbox work. 225 00:16:05,780 --> 00:16:07,220 ‫So make sure to check this out. 226 00:16:07,610 --> 00:16:12,410 ‫I will add few other games I should say I should say exercise. 227 00:16:12,740 --> 00:16:16,490 ‫You can play games and as well as understand all these content. 228 00:16:17,150 --> 00:16:20,000 ‫I hope now you have a clear understanding about Flexbox. 229 00:16:20,870 --> 00:16:26,960 ‫Just have the basic understanding, at least, so we can understand more things during the project section. 230 00:16:27,530 --> 00:16:31,320 ‫Thank you for following, and I hope you are understanding about Flexbox. 231 00:16:31,520 --> 00:16:31,790 ‫We'll get. 232 00:16:31,820 --> 00:16:32,240 ‫Thank you. 233 00:16:32,600 --> 00:16:34,040 ‫See you guys in the next one.