All language subtitles for 3.3

I think this lesson is one of the most important lessons in the entire course.

And then if you understand this lesson then all the upcoming lessons will be just building on this one

because this lesson talks about the core CSSA flex box which is understanding main and Cross access

fluxbox.

So let's begin.

All right.

So in the previous lesson when we defined the flex container by giving it display flex you notice that

the flex elements were displayed side by side horizontally.

You might be wondering why horizontally and why not.

For example vertically.

Well there's a good reason.

You see every time you define a flex container that will also define the flow direction of the elements

inside of that flex container.

Whether this direction is horizontally or vertically there are two flow directions.

One row which is applied as a default when you define the flex container and basically aligns items

horizontally like in the last video and two column which you have to apply if you want to override the

default and columns align items vertically.

But how do I change the flow direction of the elements from row to column.

Well you use a property called Flex flow and apply it to the flex container itself and set its value

to column.

So let's actually do that and see what it looks like here.

And my code editor and our CSSA file let's say flex flow column you can see now they're just sitting

above each other like before.

Now what is the point of all that and why did I say all those things.

This is the most important lesson.

Well the reason is because when the flex flow is set to row which again is the default then two imaginary

axes are automatically generated.

The main axis and the cross axis the main axis will be horizontal and the cross axis will be vertical.

But if we set the flex flow to column then the main axis in this case will be vertical and the cross

axis will be horizontal but still what's the big deal.

Why is that so important.

Well this is so important because later in the course when we use flex box properties some of them will

always affect elements along the main axis depending on whether it's horizontal or vertical.

Remember we said it will be horizontal if flex flow is Roe and it will be vertical flex flow column

and some other properties will always affect elements along the cross axis depending on whether it's

horizontal or vertical.

By understanding this when you learn new properties you'll only need to know what access that property

affects if it's the main access or assets to cross access and you're good to go.

Let me help you understand better let's set flex flow to grow again.

Now imagine that there are two axes going on the main axis and the cross axis the main axis.

In this case we'll be horizontal because the flex flow is Roe and the cross axis will be vertical of

course.

Now I'm going to set justify content to space between Don't worry about this property right now.

We will explore it later.

But what I want you to know about this property is that it's considered a main access property.

In other words it effects only the main axes which in our case is the horizontal.

So if I go to my browser and refresh you can see that it affects the elements horizontally because the

main axis is horizontal and it's a main axis property.

But if I go to my C says and change flex floats a column and refresh Oh look the elements change vertically

and yes that is because when the flex flow is call them the main axis is vertical and justify content

affects the main axis.

Now I hope you understood this lecture.

I might have talked a lot and repeated a few things but that's because this lecture is very important

and it will help you understand the entire course.

So this is it for this lecture and I'll see you in the next one.