In this video.
Let me show you how we can visualize the main axis and then the cross axis using Flexbox playground,
too.
If you go to Flexbox dot tag, you're going to have this beautiful tool to play around with Flexbox.
Okay.
So let's see if we see that for Flexbox, it lies on to concept container and then the item, as we
have discussed before.
So let's say that I want to add a container, and this is my container on the page.
So for the container, let's add an item.
When I click on this one, you see that I have item one.
And for the parent container, we have this properties as we discuss flex direction, flex wrap just
for containers and then the align items and then the align contents.
So these are the properties that we can use on the container of Flexbox.
So now let's see.
So when I say the main axis, now have a look.
When I add additional item, do you see the movement is from where?
From top left corner towards this section.
So for this one, the main axis is from where it's from left to right.
If I add one more, have a look at the movement.
Here we go.
But let's see if I add one more.
Well, there is no space to want to contain the other element.
And if I add more, it could say that it is moving outside the parent container.
So let's say that I want the other element to be on the next line.
That is why we use what is called flex wrap.
So by default it is set to no wrap.
When I change to wrap, you can see that now they are back.
That is how flex wrap works and we can use this one to implement responsive design.
So if I remove the items, let's see again the movement.
When I add one more, you see the movement from left to right and now the cross axis is from where it's
from top here.
Down here.
In this way we can use what is called the align items to position this element, because here there
are more space here.
So I can push this one at the center here or at the side here.
For the meantime, let's explore the main axis and then cross axis.
So now we know the main axis when the direction is row.
So let's remove the item here, the individual children or item here, and let's change the direction
to row reversed.
Now have a look when I add you see where it's starting from, starting from way top right corner here
to left.
When I add one more, we see the movement and now my cross axis is from way from the top right corner
to bottom, and I can use the align items to position these items also.
So let's remove this ones and let's start with the column and see the movements.
So let me change the direction to column.
Now let's add an item.
If we see that this is what in column, if I add more, you see that the movement is from where left
up here to bottom, that is the movement of the column.
So the main and this is from where from top to bottom in this order and I can add more.
And you see that because it is drop now it is moving to the next line.
Now, the cross axis is from way from top left corner to right.
That is it about the main axis and then the cross axis.
So if I change to reverse, you can see that I have reversed it.
And now let's look at the main axis.
The main axis is from where?
From bottom here to top.
That is it.
So now you know the differences between main axis and cross axis.
The next video, let's work on our projects and see how we can play around the other properties like
this for content and then the align items.