‫Hey, there.
‫Welcome back.
‫Now we are going to work with this new tool, which is known as Flexbox dark.
‫If this web site is available, make sure to jump on this website and then we are going to experiment
‫everything again.
‫Now, remember, chances are, by the time you are watching this lecture, this website is not available.
‫These are free websites.
‫Some users, there are different developers who created this for fun, and they tried Open-Source part
‫to run them on long term.
‫It's pretty difficult for several developers.
‫So if this is available, great, if not, we are going to test everything here.
‫You can understand things through video itself.
‫What I'm going to do is I have all these settings regarding my container.
‫So if you jump on the container side, you will see flexed addiction row, flex it out.
‫Nora Justify continuous flex start line items, flex start and then iron content flex stock.
‫OK.
‫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.
‫Since we don't have any drop, you can see we got a scroll.
‫So if I had a new item, you can see we have a scroll.
‫But as soon as I donned a setting to wrap, you can see now we have this item on the noodle.
‫If I try to decrease the size, you can see we are on inutile, so that's off Flex Stop is going to
‫work.
‫But then again, if I believe a few items, suppose we have these four items.
‫And if I try to play with the horizontal bar, I'm going to walk with just over my content.
‫Move towards the center.
‫OK, this is great.
‫And if I want to play with my vertical part, I'm going to use a line center.
‫Now here you can see lines and does not walking wire because we have selected the wrap, that means
‫we are still following that particular property.
‫So I need to go to Europe and then you can see a line 10 days walking.
‫Maybe I go, I want to go with straight, OK, it's walking, flexing Flagstar.
‫OK, everything is walking fine.
‫And then we have a line content.
‫No, again, I content is important when we want to shift this whole content.
‫So suppose here I have Flex Stop available and had I have more items, but if I want to move all of
‫them.
‫Down if I try to use this flex and.
‫And it will move the content individual element.
‫But if I want to just move this whole parent container down, what I am going to do is I'm going to
‫get into rehab and then I'm going to get into this whole online content.
‫And if I say Flex and I move this whole period content down, maybe I want to get into center.
‫Remember, I knew to be in a trap because without my means, I have robbed this whole items in a single
‫part.
‫And then I can move accordingly.
‫So if I go with space between, that means I have space between according to the horizontal way.
‫If I go with space around again, space around, according to the horizontal way, they remember this
‫point.
‫Main axis just back on then cross axes, a light item as well as aligned content.
‫This is great.
‫OK, let me go back to Flagstaff and again, I'm going to remove, no doubt.
‫Okay, so this is going to be like Start.
‫So that's how this is going to work.
‫Now this is all created.
‫Read our Flex Directioners row.
‫But what if I go with Flex Directions column?
‫Can I still apply all these properties?
‫Yes.
‫But the thing is, now all of them will reverse.
‫Remember the second part where we have column as vertical vertical is going to be main axis.
‫So now on main axes are to justify content is dependent and on cross axes, which is horizontal on a
‫line item is dependent.
‫Remember this point?
‫So what I'm going to do is.
‫I had if I jump on to a line item and if I say center, this will take this to saying that remember
‫if this was true, it will take to this and that here you can see this one.
‫And if this is column, this is going to take center.
‫So flag start will be this flex center will be this.
‫Flex and will be this four column.
‫OK, let me get back to Flex start now if I need to add some space in between them.
‫So I suppose if I have these three, only if I say.
‫Center, that means I'm moving this whole content center.
‫Space between I'm adding space between them and then space around again, all these properties are going
‫to remain the same.
‫So Flagstaff will take me at the Dog Flex and bake me at the bottom.
‫It might take only three elements.
‫You will get a better understanding.
‫Now, flexing to all the item will be at the center.
‫Remember when we were using just to buy content, we were playing horizontally.
‫Now we are playing vertically.
‫I hope now you get some basic understanding with this tool.
‫I strongly recommend you go visit this tool and then practice all the complete guides.
‫So basically you just need to perform on different properties.
‫Also, we can select any specific item and then change its property.
‫Remember what we did here?
‫So suppose if I want to change the order here, this is zero item.
‫If I say order as one, then it is going to move at the last Y because this is zero zero, then it is
‫going to be one.
‫Now maybe if I want to say flex growth to all of them.
‫So suppose let me offset flex grow as one, flex grow as one, as well as flex grows one.
‫All three are equal.
‫That means we have 100 percent space and we have divided 33, 33 33.
‫But suppose if I gave you here, that means I have 100 percent space and I have divided one portion
‫here, one portion here and two portion here.
‫That's how this is going to work.
‫Now headed by changes to law and try to understand the spark, so I have this.
‫Thirty three, thirty three.
‫Now if I change this to two, you can see it get more space.
‫So now we have some basic size to all of them and then we have maximum size to this.
‫So it's important for you to understand this part.
‫Now, if I try to do one simple thing, if I try to give it five, you can see it took some maximum
‫space.
‫Now, if I try to give, then you can see.
‫Still, I'm getting this maximum space only.
‫Why?
‫Because we are going to maintain the basic size of all the elements, even if I try to give 100 110.
‫You can see only small percentages increased.
‫So that's how this is going to work.
‫I hope you got the idea.
‫Again, you can walk with all the other properties, maybe you want to walk with disorder, you can
‫change the order to add we have zero one two.
‫That means this is the name and if I change this order to one, it will go at the last.
‫Or maybe if I let this one and change this to minus one.
‫You can see it comes a day for us because this is minus one zero one zero.
‫So that's how this is going to work.
‫Remember, when we are working with Flexbox, you don't need to understand everything, but you need
‫to understand the most common concept.
‫And that's it.
‫And this if you are clear with this concept, you will do 90 percent of the task on, I should say,
‫95 percent of the task.
‫That's it.
‫I hope you got the idea.
‫Maker of this tool is working walking.
‫This tool is available.
‫Make sure to jump on to this tool and try to experiment and stuff.
‫Thank you for calling, and in the next lecture, we are going to play our game.
‫Flexbox.
‫Suomi.
‫So that's all for this one.
‫And I see you guys in the next one.