‫Hey, there.
‫Welcome back, Siobhan, the site now in this lecture, we are going to play a game known as Flexbox
‫Froggy.
‫So basically we have frogs, different frogs as we go and move forward with this section.
‫We have this pond and we need to move this frog to its respective position.
‫And for this, we need to write some code.
‫So there are certain information about each level is that we are going to play.
‫And currently we have 24 levels.
‫So all of this should within Boltons be understood about Flexbox thoroughly.
‫The first thing I'm going to do is here we have this pairing with this pond.
‫We have our display proper duplex.
‫Everything is default rate.
‫And yet all we need to do is write some more property.
‫So this frog will move here.
‫It should be simple.
‫We are starting from Flex stock.
‫I just need to move this to flex.
‫And so what I'm going to do is I quickly realized just if I wanted.
‫And I'm going to utilize Flex and.
‫You can see now I am here.
‫That's fun.
‫Click on Next.
‫Now again, we have our brand new challenges.
‫You can click here to see if your challenges complete, Wangari said.
‫I want to move to any specific challenge.
‫You can do that, but I strongly recommend to move forward one by one.
‫Let's try to complete this one.
‫We have this one.
‫We need to move here.
‫Remember just to buy a center.
‫So what I'm going to do is I'm going to jump ahead and utilize Justify center.
‫Also, you can read about each one of them had some hands out orders.
‫See all the information.
‫Click on Next.
‫So now we have three Joel, and this is our parent container.
‫And this is each individual item, justify content and then we can drive a species.
‫So I have to do is use just to buy content and then let me drive private space around.
‫Since here, the space is not even then, it should be space around itself.
‫They go next.
‫And then here again, I'm going to the nice, justified content.
‫And remember, you don't need to remember all values you can jump on to this Flexbox guide, scroll
‫down to justify content and see all day back values here.
‫In this one, I'm going to utilize web space between.
‫So what I'm going to do is I'm going to utilize space.
‫And this worked fine.
‫They're going next.
‫OK, now things are changing.
‫We are going to work with horizontal axes, we have aligned items.
‫So what I'm going to do is and I need to use a line item by default.
‫It is Flex Dot and I need to move it to flex and.
‫OK.
‫This won't train next level.
‫This time we are going to work with both horizontal as well as what we call.
‫So the first property that I'm going to apply will be just if I can turn.
‫And head, I'm going to move towards center, the next property I'm going to apply is going to be a
‫line items.
‫And head on, so I'm going to move towards center.
‫Hey, you can see it's worked fine.
‫Next level.
‫Now here, this looks interesting, I have to move all these three towards, and that is flexing with
‫Elaina items and then justify content to distribute them.
‫Now here, if you don't know what value you apply, you can always jump onto the guide and see different
‫values.
‫Here you can try about space around.
‫And it was fine.
‫Let me get on to the next level.
‫OK, you need to move here, but we need to move in a reverse direction.
‫So the best thing is instead of using justify content, we are going to utilize flex direction as drivers
‫because we are going to reverse content.
‫Green, yellow and red is the direction we want here red, yellow and green.
‫So what I'm going to do is I'm going to realize flex direction.
‫Also, you can see the clue here, so Flextronics addiction, maybe Rory was.
‫This worked fine.
‫Next.
‫Well, this looks simple flextime action column.
‫Let us move to next level.
‫Now, this looks interesting.
‫What we can do is we can force reverse their direction.
‫So what I'm going to utilize is flex direction and I'm going to call this as Drew reversed.
‫Now, utilizing the if I can, I can move this here, remember to justify content, also oppose it once
‫field lives flex direction.
‫So that means video with simple rule.
‫It was here to here, but now draw reverse.
‫It goes from here to here.
‫That means the direction of accessing it.
‫You are walking with minoxidil only.
‫But the direction has changed.
‫So what I'm going to do is I'm going to utilize justify content and this will be flex and the cause
‫for reverse flex starts from here.
‫This worked fine.
‫It does move on to the next level.
‫OK, this looks interesting.
‫The first thing is we need to convert into column, so I'm going to realize flex direction.
‫And this is going to be.
‫On.
‫Now we just need to move it horizontally down.
‫Remember one thing now we cannot utilize alienate dumps, why we are in the column stage.
‫So if you get back here.
‫And we are in column that means the call.
‫So this is mean access.
‫Here we are going to utilize justified content for cross axes are line items.
‫So that means to move it down, we are going to utilize justify content.
‫And this is going to be legs and.
‫Worked fine, remember Vietnam columns so horizontal well, we worked with justifier content.
‫Great, now we are at level 12.
‫So first thing, let us convert it into columns, I'm going to utilize flex direction and I'm going
‫to change it to column.
‫Austin is done.
‫I just need to reverse it.
‫So here, instead of any second property, I can just use reverse.
‫OK, this looks fine.
‫Now I need to add some space in between them.
‫I can utilize justified content.
‫So just to buy content that should be a jump shared space between, I guess.
‫Worked fine.
‫Get back to next one.
‫OK, so we need to get in to saying that also, we need to get in to the end, quite simple.
‫What I'm going to do is since we need to change direction, so I'm going to use a reverse.
‫My order works because I need an opposite direction.
‫Once that is done, I want to bring them at this center, so I'm going to use justify content.
‫Once that is done, I just need to take them at the bottom.
‫That means I'm going to utilize Flex and.
‫It worked fine.
‫Just move on to the next one.
‫OK, this is interesting, so we are with orders now.
‫What we have to do is change the order of the law.
‫At this point of time, this is zero, this is zero zero.
‫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
‫than zero.
‫Well, fine, let's move on to the next level.
‫OK, so here we have certain other changes I want to move this at.
‫So all of them are zero.
‫If I want to move at the first, what I can do is I can go one minus one.
‫Well, fine, let's move on to the next one.
‫OK, this should be simple.
‫All I have to do is just move this item at the bottom.
‫So what I'm going to do is since this is an individual item, I have a line self.
‫But if this was better, I am won't be utilized, I line items, but this is individual item.
‫So that means I'm going to go with Flex and.
‫Worked fine.
‫Let us move on to the next one.
‫OK, so what we have to do is we need to work with these individual element so I can directly select
‫them.
‫The first thing I'm going to do is I'm going to order them.
‫I'm going to order them greater than zero if I can have both of them at the end.
‫So I'm going to say, or no one.
‫All of them are orders, you know, and this is one and one, and then I can utilize our line self.
‫So basically, I need to go with flexing.
‫It's worked fine.
‫Move on to the next one.
‫OK, this looks pretty problem.
‫But remember, if we have Flex Wrap, we can do something, so all I have to do is use Flex Adam.
‫And since we are following Nora by default, I can use Rob.
‫And things are much easier now.
‫We want the next one.
‫OK, this is a big mess.
‫First thing, my plan is to go with column and then utilize that part.
‫So I'm going to utilize flex direction.
‫Now we have column, what we can do is we can utilize the app so it will be distributed automatically.
‫OK, fine.
‫OK, this looks exactly the same.
‫The only difference is this time we need to utilize flex flow and we need to combine both the properties
‫that we did in the previous challenge.
‫So just use flex flow.
‫And how we need to pass them.
‫And then dropped.
‫OK.
‫OK, fine.
‫Now, things are going interesting at this point of time, they are flex and then they are out, so
‫we have these three distributed rows.
‫What I want is I want to move them together, so we have some space with them.
‫I can reduce that on.
‫I have two uses online content.
‫And then I can just remove their spirits, I can just say Flex starts work fine.
‫Remember, you can test it out here, so I suppose if I delete all of them.
‫And if I add new item.
‫Now, I heard if I want to add spaces between them, I can utilize online content and then add some
‫space or move them accordingly.
‫You can see storage space between space around.
‫And we can do a lot of things.
‫Get back to our next challenge, which is 22 now here we have this.
‫What we have to do is just move this down.
‫So what I'm going to do is I'm going to utilize online content.
‫And there should be Flex and.
‫Worked fine.
‫OK, this looks tricky, but I get it.
‫We just need to do it in simple words.
‫So if I need to do some rotation, I'm going to go with flex direction.
‫With the rotation, I mean, I need this line at the top, then all of them at the middle and this line
‫at the bottom.
‫So I should go with column first and see what result I'm going to get.
‫Column is okay.
‫That means I just needed to reverse the column reverse.
‫OK.
‫This worked fine, and then I just need to change their spacing, so I'm going to utilize online content.
‫And I need to change the space.
‫I'm going to call it center.
‫OK, I'm fine.
‫The final level looks difficult, actually.
‫So the first thing I'm going to do is I need to get it in the column form and then reverse it.
‫That's the first stage.
‫So I'm going to change flex direction.
‫Negative force change.
‫Then I'm going to add wrap.
‫Since I don't want everything to be squeezed in one line.
‫We got the second change.
‫But then I want to move it in a reverse direction.
‫So I can go with a line condemned.
‫And go with Flex and.
‫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.
‫Strap her a worse.
‫OK, so I don't need to use Flex, and no, because of the wrap, it was this looks fine.
‫The only thing I need to go with is I need to add some here, which is I need to change the property
‫here.
‫I need to add spaces between them.
‫So I'm going to use what are the properties of content which is space between.
‫Okay.
‫But I need to move them up, so this is horizontal.
‫I just need to move them up.
‫I can utilize just if I condensate.
‫That said, also you can utilize flex flow to grab them together, that means to have both values together
‫and sense.
‫Dodd said we have completed only 24 levels, and I hope now you have ideas about how this Flexbox groggy
‫walk and also how this Flexbox work.
‫So make sure to check this out.
‫I will add few other games I should say I should say exercise.
‫You can play games and as well as understand all these content.
‫I hope now you have a clear understanding about Flexbox.
‫Just have the basic understanding, at least, so we can understand more things during the project section.
‫Thank you for following, and I hope you are understanding about Flexbox.
‫We'll get.
‫Thank you.
‫See you guys in the next one.