Welcome back.
In this video, let's talk about a line items.
So what are a line item properly?
Well, it also works on the cross axis.
So have a look.
Let me change this one to RAW.
And after that, we bring it back to column.
So here are going to be a row.
And let me remove this one for now.
And let's see you can see that it is back to normal.
So let's talk about the line items.
Align items also works on the parent container.
So now when I add a line items, we also have these properties base line, center, flex and flex,
start, stretch and many more.
So let's select center and you can see the movements of the align items.
They are line items.
It is moving on the cross axis because the direction is row and from left to right is the main axis
and from top to bottom is my cross axis.
So in that way it is filling up the empty space.
So the center here is going to be this place.
Do you get it?
Yes.
And if I want you to be, let's see what we have.
The additional properties flex n.
So when I say it now have a look.
And indeed it is starting from way from the end because the cross axis is from this side downwards,
downwards.
It means that here is the end.
And if I want to be at this place, it's going to be as what?
Flex starts now.
Here we go.
Flex starts and indeed we have flex starts.
So these are the common properties we are going to use and we can combine a line items and then they
just file content to achieve.
Beautiful effect.
Let's say that I want to position the item at the center here.
How are we going to do it unless you combine these two properties, align items and then justify content?
If I want this item to be at the center of the container, how are you going to achieve it?
Remember, first of all, it needs to move from way, move from left to right at the center here.
And at this point, we can use what is called just flat content center.
So to be at the center here as that remember.
Yes, here.
And if I want it to be at the center here of the entire container, definitely we are going to use a
property on the cross axis and the cross axis is from way from top to bottom.
And because the direction is row, this is a cross axis.
So for this place, when I say a line item center, it'll be here how queries.
So let me show you in code.
So now back here if I provide just five contains to be at the center change this one to center here
and then align items also to be center.
Now have a look a we have something like this and I use that technique to achieve this one to get it.
Now see where we are heading towards.
I use that technique to lay out this one, but for this one inside of center, I use what is called
flex stocks for the align items, not at the center here you see with flex bars we can do many things
with it.
That's the beauty about the align items and then justify content guides.
The next video I will show you the two how we can play around with this concept and we also have properties
on the children or the items.
Let's get into that in the next video.