Hi and welcome to our video about Flexbox.
Today we're going to be discussing Flexbox layout and why it's so useful for building
responsive and flexible layouts in your apps.
Flexbox is a layout system that allows you
to control the position and size of elements within a container.
It's particularly useful for creating
flexible and responsive layouts as it allows you to control the size
and position of elements based on the size of the container.
There are several reasons why you might
want to use Flexbox in your React native apps.
First, Flexbox allows you to easily create flexible and responsive layouts that adapt
to different screen sizes and orientations.
This can be especially useful when
building apps that need to support different devices and platforms.
Another advantage of Flexbox is that it
allows you to easily control the position and size of elements within a container.
This can be useful when you want to create complex layouts with multiple elements
that need to be aligned and sized in specific ways.
Flexbox also allows you to easily create
and control the spacing between the elements within a container.
This can be useful when you want to create
clean and consistent spacing between elements in your app.
So when should you use Flexbox?
Flexbox is most useful when you need
to lay out elements in a single direction, either horizontally or vertically.
It's also helpful when you want to control
the size and position of elements based on the size of their container.
Flexbox is also a good choice for creating
responsive, mobile friendly layouts that adapts to different screen sizes.
Now let's get to coding and explore Flexbox.
You're now looking at my screen
with my editor opened, my simulator open, and my Metro bundler running here so
that we see all the changes from our editor in our simulator.
And I would like to talk about the Flex layout.
First of all, to demonstrate how Flexbox
works, we will need a view from React native.
Let's save this.
Okay, so let's save this now.
And we're going to be using this view container to display how Flexbox works.
Usually when you want to use the Flex
property, you would use style and then you would say Flex and then some number.
And the Flex property is a number that represents the proportion of space
that a child container should take up within its parents container.
But since we have no parent here, the Flex one will take up the whole space.
And if we want to demonstrate that,
we can just give this a background color and the whole space will be red.
If we're going to delete this,
then we're going to see our white background because view will not have
height or width set, so it's going to take up no space.
Great. So what happens when you use multiple
Flexbox containers as a children of a single parent container?
Let's see that.
So let's say we have some children containers here.
Let's say we have two and let's give the first one some style and let's say
that its value is one and let's give it a color so that we see this.
And let's give it yellow color and let's
copy this and give this a flex number of two and let's make this green color.
And for example, if you have two children flexbox containers within a single parent
container and one has a value of one and the other has a two,
the second container will take up twice as much space as the first container.
And if you have three, let's say, containers and the flex value here is
three and let's give it a color of black so that we see it.
We're going to see that the one
with the value one will take up one six of the space and the second one will take
two six of the space and the last one will take three six of the space.
So this is how the flex property values work.
And usually when you use view containers,
you're going to see that they're taking up the whole block.
Even if you give it a width of, let's say 200,
what's going to happen is that the yellow box will take up the 200 width,
but the view is not going to be placed next to the green view or black view.
Let's say even if this one is going to be
a width of 200 and they could technically fit next to each other,
you're going to see that they're not going to be next to each other.
So what can you do when you want to place,
let's say, yellow, green and black containers next to each other?
This is when the flex direction comes in.
So if you want to set a flex direction
property and you want its children to be aligned horizontally,
you could use something called flex direction and you could set it to row.
And if you set the row value,
you're going to see that its children is going to be aligned horizontally.
So the flex direction property in react native's flex box layout determines
the direction of the main axis on which child elements will be laid out.
So there is the row value and then there's the row reverse value.
So what this will do is it's going
to reverse the alignment of the children components.
So if we save this, we're going to see that yellow,
green and black starting from right to left instead of left to right.
If we're going to use column here, this is one other possible value.
The main axis will run vertically from top
to bottom and the cross axis will run horizontally from left to right.
So if we're going to do this,
we're going to go back to our initial setup and we're going to see that each
of these views are aligned in vertical manner.
And then there's column reverse here as well.
And we're going to see these columns in a reversed pattern.
So the first thing is going to be black,
then it's going to be green and then it's going to be yellow.
In conclusion,
the flex direction properties is useful because it allows you to control
the layout of child elements in a parent container.
For example, if you want child elements
to be laid out horizontally, you would set the flex direction to row or row reverse.
If you want child elements to be laid out
vertically, you would set the flex direction to column or column reverse.
Now let's talk about something called justify content.
The Justify Content property in react native's flexbox layout determines how
child elements are aligned along the primary axis of the container
and the primary axis is determined by the flex direction property.
So when flex direction is set to row, the primary axis is horizontal and when
it's set to column, the primary axis is vertical.
And let's explore what are some values of justify content.
So for this, let's give this some height
as well so that they are visible better
and the width of 200, let's say.
Let's change these values up.
We don't need the flex containers here, okay?
So now if we were to delete this and place them in a row and let's
delete the background color red as well, let's make it white.
In this case, we're not going to be seeing the black container actually because
we would need a scroll view for that because black would be right next
to this green container and it's overflowing.
So actually let's use smaller values, maybe like 50 for width
and if we save this now, we're going to be able to see it here.
Great.
So now let's explore the Justify Content property.
So Justify Content by default is set to something called flex start.
And if we save this, we're going to see that nothing has
changed because this is the default value and it aligns child elements to the start
of the primary axis which in this case is horizontal.
And it is useful when you want to align
child elements to the start of the container.
There also exists something called flex
end and this aligns child elements to the end of the primary axis and is
useful when you want to align child elements to the end of the container.
So this is the end of our container.
Now then there is a center value
and this is useful when you want to center the child elements in the container.
And basically this will center child
elements along the primary axis as well, which is now horizontal.
Then there exists the space between value and this distributes child elements
along the primary axis with equal space between them.
And this is useful when you want
to distribute the child elements evenly with equal space between them.
So if we save this, we're going to see equal space between them.
And then there's the last value that is
called space around and this is used to distribute child
elements along the primary axis with equal space around them.
Now I want to talk about the Align items
property in react native Flexbox layout and this determines how child elements are
aligned along the cross axis of the parent container.
The Align items property can be set to one
of several possible values that we're going to be discussing now.
So let's use Align items and let's use
flex start which is the default value here as well.
And this way, child elements are aligned to the start of the cross axis.
So for example, if you want child elements to be aligned to the top of the parent
container, you would set the Align items property to Flex start.
There is also the Flex end property and this aligns child elements
to the end of the cross axis and then there is the center one.
And if you use this,
then child elements are centered along the cross axis and then there's also
the stretch property and this way child elements are stretched
to feel the entire height of the parent container along the cross axis.
So if we save this, you're going to see that nothing is really
stretched and it's because we have an explicit height set.
But if we delete the height, for example,
you're going to see that it's going to take up the whole space of the parent
container and stretch this element and fill the entire height.
And that's what would happen if we deleted these heights as well.
Actually I deleted the width.
So here we go.
And then there's the baseline value
and if we get our height back here just for visibility,
we're going to see that child elements are aligned along their baselines of the cross
axis and the baseline is going to be at the top.
So if you were to explore what is going
to happen if you were to change the Flex direction to column
and then experiment with this, you're going to see that the justified
content is still going to use the space around to equally distance these items
along its primary axis which now became vertical.
So basically you could experiment
with this concept and create any kind of layout that you want.
And this will be very useful when you're
going to be creating complex applications and you are going to want to make your
applications responsive and not worry about the screen sizes and the devices
where your application is going to be run on.
In summary, Flexbox is a powerful layout
system that can help you create flexible
and responsive layouts in your react native apps.
It's useful when you need to lay out elements in a single direction, control
the size and position of elements based
on the size of their container, and create responsive mobile friendly layouts.
Thanks for watching and see you in the next video.