‫Hey, there.
‫Welcome back.
‫Now in this lecture, let us continue our task with Flexbox.
‫First thing is I decreased the size of this box, as well as 10 different sizes just to discuss a few
‫other topics.
‫So I just make these bog smaller, nothing else.
‫So now let us understand about the other topics.
‫That means we are not scared about Flex collection.
‫You are not told about Flex Wrap, and we now have concept about what is main access and what is cross
‫axes.
‫Now there are few other properties that are included with this whole Flexbox container.
‫If you just scroll down a bit with the complete CCIs Flexbox guide, you will get information about
‫justified content.
‫So that means when we have multiple items, we can arrange them according to this piece that is available
‫on screen.
‫If I jump here and if I try to use justify content and if I assess center, save this one good market,
‫you can see all the items are in center.
‫Now there are few other properties by default towards the flex start.
‫So if I just get back here, use Flex Start, that means I'm going to start from the left hand side
‫if I go flex and.
‫That means I'm going to just move towards the end anuses, remember, I'm shifting all the elements
‫as it does, I'm not moving the number one hand, moving the number two.
‫Ah, no, I'm moving this whole part on the right side.
‫Now we have other properties like center.
‫Then there is space between what it is.
‫It will have some space between all the elements.
‫You can see this is item one.
‫Then some space item to some space item three, some space for some space and five, then we have other
‫properties like space around.
‫So that will add some space on the left margin as well as on the right margin.
‫OK.
‫Let us try.
‫So that will be space around.
‫Get back here.
‫There is some space.
‫Space.
‫What each element, but obviously there is more space between these elements.
‫What I can do is I can utilize space evenly.
‫Save this one.
‫Get back here.
‫Now I have even space on all Typekit.
‫Now, if I try to decrease the size, you can see they are squeezing a member of properly.
‫We can use all I crew uses Flex Wrap.
‫And I'm going to go, Rob, save this one and get back here now if I try to squeeze them.
‫You can see.
‫They are following the real property as well as they are following Justify as spaced evenly.
‫So if I just decrease their size.
‫You can see they are following this space property for the next row as well.
‫That's how this is going to work.
‫Now one important thing.
‫This justifies saying that is pretty much the most important thing that you are going to utilize in
‫several projects.
‫Why?
‫Because it's a shortcut to get your item a line in the center and doing this with other things like
‫doing this with blog or doing this with any other method going to take some CSIS knowledge.
‫If you see we utilize margin auto when we were working with blog also when we were walking with fixed
‫fee utilized, fixed align, then center.
‫So this is like a shortcut.
‫You are going to get into container, add display flex and then add justified content saying that and
‫you are going to get everything at center.
‫Remember, you have option to specify different mediums like space between around or space evenly.
‫This looks fine.
‫Now we have some other properties.
‫If I scroll down a bit, you will see item online.
‫Remember, I discussed about the margins mean cross.
‫Remember?
‫So at this point of time, this just if I can take, was helping us with this main axis, if we see
‫we were able to define all types of properties, but they were dependent on demand access.
‫So if I use space around.
‫Everything will happen on the main axis itself.
‫But if I start working with, I don't align.
‫This will control things on the horizontal axis, which is cross axes.
‫So if I jump here, we have properties like Flex Start, that means everything will be at the top.
‫Then we have flex, and that means everything will be at the end of debate.
‫Then we have fake center.
‫Everything will be in the center.
‫Then we have stretch.
‫Then all the items will stretch and then we have baseline.
‫That means if there is any item big, if there is any item small, any type of item, they will align
‫according to their best size.
‫OK, let's try this one also.
‫So the first thing I'm going to do is I'm going to add some size to my container at this point of time.
‫My container is small and dependent on these item itself.
‫So I suppose my container is let me be height as seven edge.
‫Save this one.
‫OK, now we can understand all these concepts and also try to change the size of at least one item.
‫So let me use height and what I the height of maybe a country.
‫And let's say this is 150 pixels.
‫OK, now we can understand things better.
‫So the first one I'm going to try is a line item, and I'm going to try with Flex stock, which is the
‫default one.
‫So what I'm going to do is remember, this is going to work with our container that is on patent glass
‫itself.
‫So what I'm going to use is a line items.
‫And here we have multiple option.
‫By default, we are going to start with flex time.
‫Save this one.
‫Things are going to remain as it is.
‫Remember, I have removed Justify saying that.
‫You can apply both properties, don't worry, you can apply them together, but I want to discuss about
‫this whole part.
‫So this is flex start and then we have Flex, and that means everything will be at the bottom.
‫So what I'm going to do is utilize flex and save this one.
‫Get back here.
‫You can see.
‫Then we have center.
‫Looks fine to me.
‫Let me get back, OK?
‫This is how center is going to work.
‫Then we have stretch.
‫That means each item will be stretched out.
‫So if I get back here.
‫Rate us again, why this is not looking.
‫Well, we have to find individual size.
‫So if I remove this one, save this one and get back in, you can see all of them are stretch, except
‫this one because we have our height here.
‫So that's a stretch is going to work.
‫It stretches all the item.
‫Now, the next one is about baseline.
‫If I jump back here and if I remove the height of the third element itself.
‫And if I just remotely stretch itself safe, is he by default also they are in this room?
‫What I can do is if I use baseline, save this one.
‫And here you can see they are dependent on their content now.
‫Remember, one important thing, we haven't added height to any element.
‫So if I remove this baseline?
‫Save this one.
‫They are again stretched.
‫So you need to keep this in mind when you want to align according to the baseline of the items.
‫Then this is going to work.
‫OK, let me get back to Flex stock and see if this one.
‫And I also need to add the height again.
‫So I hope you got the idea, how this aligned content, what we try to add content at the top, then
‫at the bottom, then at the center.
‫So we were working with the world equal access.
‫That means cross access in this case.
‫And when we are working with just to buy content, we are working with the horizontal axis.
‫So that's all for this lecture now in the next one, we're also going to discuss about certain properties
‫that are related to the items.
‫So in this one, we were focused with the properties related to container in the next one.
‫Let us also discuss about the properties related to item and then mixed both of them.
‫I hope this lecture was helpful.
‫Thank you for calling.
‫And I see you guys in the next one.