Welcome back.
Now that we know the main axis and then the cross axis, let's see how we can arrange the items the
way we want it.
So we are going to use additional property on the parent.
So let's bring back the weight of 500 on each of the children.
So now back to 150, 150 as we have before.
And for the meantime, let's work with the road.
Great.
So here we go.
You can see that there are more spaces, what is not occupied, and we want these items to be filled
up.
So how are we going to do it?
Let's see.
Now the main access is from where is from top left corner to right.
So for this one we can use just five content to spread the remaining spaces.
So on the parent, which is a container when I add this content.
So the value for just for content are baseline center and flex and flex starts space around and space
between.
Let's explore more when I say center.
Now have a look before I save it.
Now the width of the parent is from here to here and it has occupied the space.
When I say center, meaning that I want the items to be at the center of the parent on the main axis.
So the main axis is this one, right?
So let's see if I save it here.
Now have a look.
Now you can say that it is at the center on the main axis.
Great.
And if I want to spread up, I'm going to use what is called space between when I save it.
Now they have spread it out on the main axis, how cool it is and how easy it is.
And if I want to have some space around it, going to be space around, you can see that there are spaces
around individual items as that.
That is a space in for you.
So you are going to use center space between space around many times.
So be familiar with a values.
That's a behavior of it.
But if I change the direction of this one, the movement of the main axis is going to change.
Now have a look.
If I change this one to row reverse, so let's save it and let's have a look.
You see, the movement now.
Now is from where is for right to left this way again, if I change this one to around the same thing
or space between so is going to be between eight and nine.
We see that there is space between the items that is the row, reverse and row.
So what about if the direction is column?
Now let's change this one to column and let's remove this one for now.
And you can see now tell me the main axis and then the cross axis.
Well, by default the main axis is from where it from top to bottom.
So in this way we have some empty space on the main axis, which is this one.
You see that there are some empty space here, so we can spread up the items to occupy the empty spaces.
So now back here, if I make this of justified content to be center, you see that it's moving on the
main axis.
On the main axis, perfect.
So what about if I want to make use of space around as that?
You can see the movement too.
There are some spacing around the heading.
And what about space between the same thing?
I start.
So let's say that you want something like this in your application.
Why not?
You can go ahead and use these properties.
So if I change this one to reverse, now have a look.
You see that everything has been reversed.
So I have showed you these two properties.
That is the flex direction and then the justified content.
Remember, that's far contained works on the main axis, whether from left to right or top to bottom
or bottom to top or right to left.
So you use this for content to control the movement of the items on the main axis.
So.
Let's take it that I want this item to be at the center of the container here or my parents.
How are you going to do it?
Let's get into that in the next video.