‫Hey, there.
‫Welcome back.
‫Shame on the side.
‫Now let us start one of the most important what I should say the most important topic of CSIS then now
‫we have discussed a different topic just to create a structure as well as some styling.
‫But now we are going to focus on how to make layout of any website or any other application.
‫Now we are going to discuss about Flexbox now this topic is important and why you should focus on this
‫because I've prepared some content beforehand.
‫I'm also going to discuss about a guide.
‫I'm also going to utilize a tool to describe this topic, and then we are also going to play a game.
‫You can see the amount of preparation that I did for this topic.
‫That means we are going to talk some serious content.
‫I hope you are ready for it.
‫Remember, after completing this whole section, it will be quite easy for you to design any type of
‫layout with the help of Flexbox.
‫It's an important topic help you to design any type of lay out pretty quickly, but to understand how
‫to do that, it is going to take months off topic.
‫Not only the practical part, but there are certain tree concept that I want to discuss.
‫Yeah, it's important, and that's the reason I did tons of preparation for this lecture.
‫What I should say in this section.
‫So the first thing is I have created a symbolic vote.
‫What I did is I created a container.
‫This is our patent basically, and addicts are dangerous.
‫So there are five child containers out of patent.
‫And I done one item to item three.
‫All of them are detailed.
‫I also added some pics so we can define, Okay, this is item one, item two, item three.
‫And I also added a glass call item so we can apply all the common changes.
‫I don't want is the unique class, and I don't want to see common class applied the genders, that's
‫done.
‫Now let me jump on to Celeste here.
‫I have a better deformed face.
‫Totally.
‫I need something big so I can have these items, as well as any other number that I had.
‫Then change font family as well as the color in color.
‫And I have updated certain settings, so I have added weight as well as height aligned tag center and
‫then border radius for all of them.
‫Then the next thing I did is I head is our container, which is basically are parent and added a chocolate.
‫OK, you can assume this is blue.
‫And then I added a different color for each child, which is light on one two three.
‫So we can recognize them easily.
‫Pretty simple format just to have a better visual experience for each item.
‫That's it.
‫That's deeply preparation.
‫I hope you got the idea.
‫Now, the important thing that you need to understand is the parent and child relationship, her container
‫as parent and item one two three four, as well as five its child.
‫I hope you have this much information.
‫OK.
‫That's it.
‫Now let me get back to our crew now.
‫If I want to work with this container, you can see we are actually having the complete view.
‫That means complete screen.
‫Then this is item one.
‫Definitely.
‫It's a device that is going to be block having 100 percent work item two, three four as well as five.
‫So all the item following the predefined display images block.
‫Now, what I'm going to do is I'm going to change their display to Flex.
‫Yup.
‫We are going to change debate and display.
‫And they are going Virginia to flex now.
‫Two important things.
‫The first one is.
‫There is container which is building, and then there is item, which is their children.
‫We have certain properties with parent that affect child.
‫So that means we have certain properties that we are going to apply to bidding.
‫And according to that, the layout of all tiles will affect, so that is we are going to do something
‫with bidding.
‫Then there are individual property for each child.
‫That means for item one, item two, item three.
‫So that means if you want to change certain properties of individual child, we can do that with the
‫help of properties that are available with item.
‫So in simple words, we have certain properties related to parent on the left side and then we have
‫certain properties related to child on the right side.
‫That said, OK, dad, all.
‫Long story.
‫Get back here.
‫This is my container, my period.
‫What I'm going to do is I'm going to add display and I'm going to change it to Flex, which basically
‫means flexible layout.
‫If I save this one?
‫Get back here.
‫OK, now we can see this whole change.
‫So this is I don't want two three, four five and this is our container background color.
‫You can see this is a container background color.
‫And if I squeeze them.
‫Hey, you can see all the items are changing their very size as well as they are stuck only in one line.
‫That means we are following some predefined properties.
‫That's why they are following the horizontal path and they are only capturing the defined work.
‫As well as if we try to squeeze them, they are changing their size.
‫So that is important.
‫That means there are certain default properties that we are following.
‫And that's where the first property with be come into picture.
‫Remember, we have applied this display flex to complete parent and all details are affected in the
‫form of layout and the background color is related to our container, which is parent.
‫OK.
‫This is our display flex.
‫Now I'm going to apply the first property, which is flex direction.
‫Now, this flextime action has all value by default, we are falling low, and that is why you are seeing
‫this this layout.
‫That means we are following some horizontal layout.
‫If I try to use reverse, that means I'm going to follow the horizontal path, but everything will be
‫reversed now.
‫We have item one, item two, three four as well as five, so we just reverse the current troop grade.
‫Then we have column.
‫Save this one.
‫What it is going to do is that it's going to fall a one two three four five.
‫But if I do call and reverse.
‫It will be reversed.
‫That means we will have to one.
‫That means five four three two one.
‫So that's how these four night action followed.
‫Now remember, here we are applying these changes on parent.
‫That means this flextime action is slated to appear in property.
‫Let me go back to the law itself.
‫That is the default property.
‫You don't have to write this one, but for now, I am mentioning here because I'm going to discuss some
‫tree concepts.
‫Now, remember, it's important, and most of the courses miss out on this concept.
‫So if you jump in and click here with regards to basics and TomTom's, you will get tons of concept
‫and these are important.
‫Here, I need to discuss about this whole diagram.
‫What I'm going to do is I'm going to jump on to my notebook and discuss everything step by step.
‫So this is our container, which you can see this flex container.
‫And then here we have our item one.
‫Our Item two looks fine.
‫Now when we follow flex direction as raw.
‫That means we are following a horizontal path, no means we are going from one to three in this direction.
‫That means when we followed this part, our main exercises on our horizontal part.
‫So this is our main access when we are falling rule and this is our cross axes.
‫Now why this is important because 13 properties of bearing depend on this mean axes and certain property
‫of our parent depend on this cross access.
‫So it's important for you.
‫Now, remember the direction we are flowing from left to right, as well as from top to bottom.
‫When we withdraw support, if we change anything, that means if our direction change from road to column,
‫things will be different.
‫Let me design our container again, and then our item will be followed as one.
‫And this is going to be two.
‫So that means the main axis will be this one.
‫And across access will be this one.
‫Remember, this is just reversed.
‫This is going to be mean and this is going to be across.
‫And this is important concept.
‫Now, remember, when we are following you, we are following the horizontal direction.
‫That means mean axis will be the horizontal one because we are following the horizontal direction.
‫This is mean and then the opposite one will be the cross axis.
‫Now when we are following column.
‫That means we are following the vertical direction.
‫So this is going to be Ottoman axis and the opposite one will be the cross axis.
‫That's the important point.
‫Now in future, we are going to talk about two properties that depend on men as well as grass on main
‫axis are justified.
‫Content will depend on cross axes are aligned.
‫I stumbled upon.
‫And this is going to remain same here also.
‫So that means when we are working, withdraw just if I can, then changed everything on this horizontal
‫layout.
‫But then we are working with column just if our content changed.
‫What layout?
‫OK?
‫This sound confusing, but as we break this, things will improve.
‫Let's get back to our courting part, so by default, we have this direction as raw.
‫Let us talk about a few other things such as Flex Wrap.
‫So if you'll get back ahead, then I try to squeeze this one.
‫You can see all of them are still on these same horizontal axis.
‫But if I add, flex it up and by default, it is at Noora.
‫That means we are not moving towards a different line.
‫But if I use wrap, save this one.
‫Get back here.
‫And if I try to squeeze it, you can see as we squeeze all the item, all the items that we are going
‫to grab, just drop and go a new line.
‫So if you just try to decrease the size as soon as I touch the point here.
‫It start moving to a new line and team follows one other items.
‫You see?
‫Yep.
‫So that's how this is going to work, and it's an important property that help us through design responsive
‫content.
‫So I hope you got the idea.
‫What this job?
‫Now I hope you got the idea.
‫What is no wrap itself, but there are 13 other values.
‫So if you see the reverse, that means it will be exactly the opposite.
‫Everything is working fine, but as soon as I decrease the size.
‫So instead of five going down, you will see five going up, for example.
‫You see.
‫And if I were to criticize again four, then three.
‫Now all of them.
‫So we did just oppose it.
‫OK, you don't need to remember them as we walk, as you build some projects.
‫You will gain experience, but drop as an important property.
‫So here this is important.
‫Now there is one more property, which is known as Flex Float.
‫This is basically the combination of flex direction as well as Rob.
‫So had we passed to fields, the first one would be the flex direction.
‫And then the second one will be flex it up so that we don't need to write them separately.
‫They are combined here.
‫If I get back here.
‫You can see our Flex Wrap as walking.
‫So if I try to change this to column.
‫Save this one.
‫Get back here now you can see the Column Direction one two three four five, so I hope you got the idea
‫here.
‫Let me try to use reverse.
‫Remember, if we are on go reverse and will start from one two, three, four five, and if I try to
‫decrease the size, you can see things are going in a different way.
‫So that's how this is going to work.
‫Again, you don't have to remember all of them.
‫Make sure you don't try to lock them up.
‫So that's all for this lecture and the next lecture, we are going to understand more concept, understand
‫how we can work with all the different properties and going to utilize the concept of mean as well as
‫grass.
‫I hope this lecture was helpful.
‫You got some basic idea about flex blocks and we are going to continue this in the next one.
‫Thank you for following and I see you guys in the next one.