In this video.
Let's use this tool to summarize everything that we have talked about under Flexbox so you can see that
for flex container these are the properties direction drop just file contains align self and align contents.
I didn't talk about align content, but you can exploit it at the free time.
So these are the common use ones.
So to get started, let's add an item.
Remember the flex direction is row.
So this is our flex container.
So let's add one item and let's see.
Now you can see that the main axis is from left to right.
You can see that the main axis is from left to right because that is where it is moving towards.
So now let's see.
Now this is my items and if there is no space, then I can use what is called flex wrap to move it on
a new line as that.
And for this one, we can control the position of the individual item because there's enough space here.
So to achieve that, we are going to use what is called justified content.
So like I said, this property control the element on the main axis.
So when I change this one to center, you can see that it is at the center of the page on the main axis
and if I change it to flex end and start and between and around as I've shown you.
So this is what we call the main axis.
But if I change the direction to row reverse now the order changes.
And if I change the Java content again, they are all on what?
On the main axis.
So that's why we see the effects on the main axis.
So what about the column?
If I change this one to column now, let me remove it and let's start adding up the item.
So when I add additional item on the page, you can see that it is starting at the center on the main
axis because I said that the just file content supposed to be what's space around now if I change to
start now, it is starting from here.
If I change to end is at the end of the parent container and then space between and then space around.
So let me change this one to start and let's add more items to it.
So for this one, the main axis is from top to bottom, and then the cross axis is from left to right.
So I can control this one using the line items, whether it's supposed to be at the center here or here
or whatever I want.
So let's add more items and you can see the movement.
And let's say that we want to work.
Let me remove all these items.
Let's say that you want to work on the items, the flex items.
Now, let me bring back to Raw here and then we're going to be at the start.
Okay.
So if I click on that, you can see that I have the properties for the items.
So let me add more items in the mix.
And now let's see when I click on the first one.
Now I can control the order when I say that this one, the order is supposed to be one, you can see
where it is.
I can increase this one as flex grow.
So let's grow.
It is same as flex a shortcut for flex grow.
When I say flex, grow the same as what?
Flex.
So you can see that if I give it as one, it means that it has taken the available space.
And if I click on the second child and I see that the flex grow is supposed to be two or three, it
can see I can change the grow also to say one.
And for this one too, I can change the grow also.
Now I can change the order.
Let's say that for this one, I want it to be at the beginning or the end.
I can use this one so we can play around with this tool to be familiar with Flex Box.