‫Hey, there.
‫Welcome back.
‫Now it's good time for us to move towards this section in which we are going to understand how to play
‫with multiple parts of Flex and how to change theory sizing, or I should say how to change them according
‫to resizing.
‫So remember, the first change I need to do is as soon as I get any size towards my tablet, I want
‫to get it down, right?
‫So what I can say is let's give it 100 percent weight, so this will move down.
‫What I can do is I can get into my middle, which is seven, six, eight pixel and head.
‫I just need to select my order and then my legs.
‫And if I put a wider width of 100 percent right here, and if I see, you can see this is moved down
‫now.
‫So that's the first task we did because of Grab.
‫This is moving down and again now because our 400 percent bird condition, this is moving down.
‫This looks great to me.
‫Also, let me add some margin top and bottom.
‫So let me also change margin top.
‫And what I'm what I'm going to do is I'm going to add margin.
‫To them and then auto.
‫So this is also going to keep at center and to them will help me to add some top and bottom margin.
‫Great.
‫This looks fine to me now that Steve.
‫But I want something like this.
‫I want to move like this.
‫OK, we can do certain more changes.
‫We can control things.
‫So what I'm going to do now is now remember, this is our flex itself.
‫So remember, this is a container and we call this container as links, right?
‫And this is a flex itself.
‫And currently, this flex is falling by default, flex direction of growth.
‫That is why they are.
‫And this part like three parts one two three parts.
‫What if I say flex direction as column?
‫Currently, they are following the rule part.
‫So one item two, I don't really dumb.
‫If I say flex direction as a column, then first item.
‫Second item, part item.
‫Something like this.
‫So I need to change this.
‫So I'm going to target this link itself, and I'm going to change the flex direction.
‫Remember the display's flex itself?
‫But here I can override the Flex Direction as column and if I save this one.
‫Get back here.
‫You can see that's how this is working.
‫And there are enough sequence.
‫And you can observe the boxes now with the help of this whole Flex thing, but this is working great.
‫OK, now the next problem, I need to decrease the size here and also add some size above my head because
‫you can see this need some gap.
‫You know, this needs some gap, so what I can do is I can jump here and I can target my hurting itself,
‫or I can target the complete section.
‫If you remember we have this whole div, but this, then this div, then this div so I can select the
‫company, the communities and the useful link, I can select them individually.
‫So here I'm going to go over there for the Dart Company and then order the communities.
‫And the third one will be ordered to be used for.
‫Links.
‫That's great, and all I do is add margin to them.
‫Remember, I need one margin not only so margin drop to them, save this one.
‫Now you can see there is some gap.
‫So if I remove this flex now, this whole flex thing, if I remove.
‫Now you can see this gap.
‫OK.
‫This look much better, and this is great.
‫If I scroll down here.
‫Yeah, that changed, I currently says Gap between head.
‫So as soon as I get inside the wrap part.
‫I cannot gap between them, so that can be done since this is another.
‫And so we can change this insider response, if not CSIS, as soon as I had this part, we can add some
‫margin.
‫So what I'm going to do is I'm going to select my anchor after this year.
‫So this is going to be hotter than I'm going to select my extras.
‫And then fans remember I'm following the sequence first.
‫I have heard, then maybe our banner then hotter than all the sequence in Qatar.
‫So I'm following some sequence of even if I need to edit it later, I know haters are going to be at
‫the top.
‫Otherwise if I tune header here, it will mess things again.
‫So just follow the sequence.
‫Inside my spine, I'm going to change margin top.
‫And I'm going to change the truth to save this one.
‫Get back here.
‫Yep, we have this gap now, so I hope you got the idea how we change multiple things.
‫Now there are a lot of things that we did, even if you just try to minimize this, things are working
‫fine now.
‫Now there are chances that you want to change this height again.
‫As we move towards the mobile parts of this height can be changed again.
‫Maybe if I jump inside my mobile section again, here I can change this headlight.
‫So let me try this one.
‫So this is my headlight and let me go with five trim now.
‫And also let me try to update my in-laws eyes and let me try with.
‫Maybe 25, fixer.
‫Save this one.
‫Get back here.
‫OK, this is -- fine.
‫I can also change this, but for now, let's move with this, OK?
‫This is working great, so that's how things can work, and I hope you got the idea.
‫Now, one thing I really wanted to change if you want, depends on you.
‫You can change this capital.
‫So currently our orders get out.
‫You can see the batting, actually.
‫So if you see to one, you can go with zero point five zero zero point five.
‫This looks much better.
‫So you going to build this part also if you want to create a depend on you.
‫But if you go with zero point five for top to bottom, this should work better.
‫So if I just see this part?
‫Yeah, we can change this to 0.5 and style, not KSAZ itself.
‫So just scroll down to the bottom.
‫And here we are drowning, which is going to be zero point five.
‫Now this will also change for our left and right.
‫So what I'm going to do is for top and bottom 0.5 and left and right one them.
‫OK.
‫This is better.
‫Yeah.
‫I hope you got the idea now that are certain sites that want this to be at the center and the I left,
‫you know how you can do this, you are walking with Flexbox.
‫Also, you can decrease the size if you want, but I don't want it.
‫But if you want, you can do that the other day and you can do it by jumping around to my section.
‫And if I jump on to my local bar, you can see this.
‫There is some extra space here.
‫So what you can say is, let's say, logos, flags, and then you will have option to center this according
‫to justify content.
‫So, for example, you can directly jump here onto the main style or CSIS.
‫And here you can jump onto the logo bar itself.
‫This logo, our just flex right now.
‫Here, and you can change this logo to Flex and then justify its center.
‫I totally depend on news.
‫So for example, if I jump here and create a photo directly target the logo park, I'm going to change
‫its display to Flex.
‫And here I can also add Just acquire content center.
‫Save this one.
‫Get back here.
‫Now this is flex and you can see how they justify content is working.
‫But remember, this is going to mess a lot of things as I go full screen.
‫So if I close this one, you can see this is going to mess a lot of thing.
‫So that's all for this lecture, I hope you got the idea how we are going to clone our website.
‫Now there are few things that I want to talk about.
‫And our first thing is about how to utilize variables.
‫So instead of writing these values again and again, like there are certain common values like this
‫one, or maybe disagree.
‫So instead of writing them again and again, we can assign these values to a variable and we can call
‫this variable.
‫So usually website that follows a theme followed this type of variable.
‫Don't worry, we are going to discuss about this in the next lecture.
‫So you don't have to worry about what this variable topic is.
‫Thank you for calling.
‫And let's continue this and the next lecture itself.