Welcome back.
In this video, let's look at the Flexbox properties that we can use on a parent container.
So here we go.
The first property is what we call the flex direction.
This one simply means that how we want the items to be moved, whether you want it to move from left
to right or from top to bottom.
And this is what we call the flex direction.
And after that we also have another property called align items, as the name even implies how the items
or the children can be aligned and all these properties can be influenced by the main axis or the cross
axis.
And we have a section to talk about main axis and then the cross axis.
For the meantime, know the properties of a parent container and after align items.
We also have what is called justified content where I will show you with code.
And lastly, we have what is called flex wrap.
And for this one it simply means that if there is no space to accommodate the items, it needs to move
on a new line.
So these are the parent properties that you are going to use.
A lot, a lot, a lot.
So please pay attention.
So let's take them one after the other.
Let's talk about the flex direction.
Like I say, this one determines how the items that the children should move, whether as you move from
top to bottom or left.
Right.
So let's see the values for flex direction.
The first one is what you call row, and this is by default.
And you can see that the direction for this one is row, meaning it is from left to right.
In this order, the next value is what we call the row reverse.
Meaning if we want to reverse the row order and I'll show you in just a second.
And after that we have what is called column, meaning.
If you want the items to be on top of each other, we are going to use the column value for flex direction.
And lastly, we also have for this call column reverse.
Let's demonstrate that with code.
So back to Visual Studio code.
This where we left.
Now when I provide a property called Flex Direction and by default the direction is row.
When I save it, you can see that it is the default behavior and the next value is what you call the
row reverse.
Take note.
You can see that it is starting from A, B and C from left to right.
Now, if I change this one to row reverse, now have a look.
You can see that the direction is from way top, right corner to left and starting from A, B and C,
meaning I have reversed the order and the next property of value is called column.
So if I want the items to be on top of each other, I'm going to use column as we see, we see that
they are on top of each other.
If we add a with 1%, you can see that I'm going to cover the entire available space.
So let's do that.
Let's say on the width of the child.
One, I wanted to cover the entire page and you can see that that's what we have our copy this one,
paste it here and paste it to save it.
And you can see that they are on what, on top of each other from top to bottom.
And I explain to you the movement of the items in the next video, and I can also reverse this one by
adding what is called column reverse.
Now you can see that I have reversed the order and you can see that it is from bottom to top.
That is the column reverse.
So this added a basic concept when it comes to Flexbox, but that is not all.
We are going to dive in to look at how we can move these elements around and the movements of the elements
or the children or the items depends on the.
Mean or the cross axis.
To better understand.
Flexbox the key concept you need to know is what we call the main versus cross axis, because this axis
determines how the items or the children is going to behave.
Then this video, let's have a look at when we say main or cross ises, what does it mean?