Okay, let's talk about Flex now.
What is a flex?
And you can see it is already here.
And the flex is the normal way to create a layout in React Native.
And this is very the same as we have in our CSS.
So if you are already familiar with CSS flex box, then you are good to go.
You don't need to do anything else here.
So basically the syntax and the layout will work in the same way.
But in this video I will show you how we can actually use it.
If you are not familiar with that, then we can, uh, have a, uh, some exercises here.
So what is a flex?
Flex is a way how we can organize some content on our screen.
So basically giving the flex of one, that means we are telling to our application that we would like
to have the this container will take the full, full size of the screen.
So basically flex one, the bigger number you will have it, the more important it will be for the siblings.
So, for example, if I have a home that is flex one and then I can have another element that is next
to it.
So at the moment we don't have that situation here, but I have one home here and then we have two tags.
So what I could do is I can arrange this children for like this.
This home is assigned to The View.
So basically all the two tags here, that's the Children of The View.
And I can say, okay, this is flex one.
So the View will take the entire space here and I can align the items in the center and also I can just
justify the content center.
So if I would remove this here and save it.
You can see this.
I have the the text somewhere over here and then I have my name here.
So I have the padding.
If I would remove the padding, there will be somewhere here.
So the way to distribute our content in between we have we have a few options there and then we have
align items.
Also, what we can have is we can have direction either row or column if I do column here.
I need to do flex direction.
You can see nothin actually is changed because the flex direction by default is column.
I can change it to row.
And instead of having that upside down, my content is now row.
So that means it will go from left to right.
So in that case, I can also do reverse if I want to reverse it and my name will be here on the left
hand side and this will be a second, despite the fact this is first in our layout here.
So I can do column, reverse row, reverse or just column or row.
So basically that you can control if you have some kind of a header here, for example, and you would
like to have some button here, then some text and another button then you can do a row, uh, kind
of a flex for, for this setup.
And then you can equally distribute this, uh, children in here or you can give them a specific flex
power.
So, for example, the first button might have a flex one.
The main part might have a flex five and then another one flex one, and that will be equally distributed
like this.
So if we will have, let's say.
I would like to change this for Bhutan and then I will just take it here.
Let's try to do something like that.
So we have a button and then we say, This is Flex.
One.
So what I can say is this name will be flex five and then I can have another style.
Text is just an example.
I can have a flex one.
So now I will need to also apply the styles.
So I will explain it in a second.
What I've done because I don't think it's fast, just do a sub proof of concept.
Here.
And what what I've done is I have this kind of, uh, setup here.
So what I have is I have this space here, and that's, uh, like a one seventh of the space here,
and that's also one seventh.
And there are on the edges here, and this is in the middle here.
So that's like a column layout, if I will.
Uh, this is a row layout if I will change it to column.
It will be similar way, but it will be upside down.
So the for the first part, which is power of one.
Then we have another one and then the third one.
So, uh, how this is calculated in, in terms of how much space they occupied, basically you will
need to sum up all of them.
So if I have two elements with a power of one, that's two and one element of power of five, that's
altogether seven.
So this one is one, this one is five, and this one is one.
So, uh, you will have one seventh of this one.
One seventh of this one and fifth of seventh of seven on, on this element.
So basically the way to control the, the layout, you will control it with the flex.
Uh, once we will create our own application, we will see how it works in a real world.
But basically it's only a few kind of elements that you can work with.
So basically we have a flex, then we have a line items and then we have justify content and then we
have a flex direction here and then we can apply this to different containers there.
So that's how the flex works.
As I said, we'll come back to this later on, but that's very important thing to know in React Native
because that will be our main tool to create the layout in our application.