WEBVTT

1
00:00:00.240 --> 00:00:02.940
Hi and welcome to our video about Flexbox.

2
00:00:02.970 --> 00:00:07.420
Today we're going to be discussing Flexbox
layout and why it's so useful for building

3
00:00:07.450 --> 00:00:10.340
responsive and flexible
layouts in your apps.

4
00:00:10.370 --> 00:00:12.620
Flexbox is a layout system that allows you

5
00:00:12.650 --> 00:00:16.620
to control the position and size
of elements within a container.

6
00:00:16.650 --> 00:00:18.780
It's particularly useful for creating

7
00:00:18.810 --> 00:00:22.580
flexible and responsive layouts as it
allows you to control the size

8
00:00:22.600 --> 00:00:25.980
and position of elements based
on the size of the container.

9
00:00:26.000 --> 00:00:27.740
There are several reasons why you might

10
00:00:27.760 --> 00:00:30.580
want to use Flexbox
in your React native apps.

11
00:00:30.600 --> 00:00:35.700
First, Flexbox allows you to easily create
flexible and responsive layouts that adapt

12
00:00:35.730 --> 00:00:38.260
to different screen
sizes and orientations.

13
00:00:38.290 --> 00:00:40.020
This can be especially useful when

14
00:00:40.050 --> 00:00:44.100
building apps that need to support
different devices and platforms.

15
00:00:44.130 --> 00:00:46.360
Another advantage of Flexbox is that it

16
00:00:46.390 --> 00:00:51.140
allows you to easily control the position
and size of elements within a container.

17
00:00:51.170 --> 00:00:55.300
This can be useful when you want to create
complex layouts with multiple elements

18
00:00:55.330 --> 00:00:58.660
that need to be aligned
and sized in specific ways.

19
00:00:58.680 --> 00:01:00.980
Flexbox also allows you to easily create

20
00:01:01.010 --> 00:01:05.180
and control the spacing between
the elements within a container.

21
00:01:05.200 --> 00:01:07.050
This can be useful when you want to create

22
00:01:07.080 --> 00:01:10.490
clean and consistent spacing
between elements in your app.

23
00:01:10.520 --> 00:01:12.770
So when should you use Flexbox?

24
00:01:12.800 --> 00:01:14.800
Flexbox is most useful when you need

25
00:01:14.830 --> 00:01:19.740
to lay out elements in a single direction,
either horizontally or vertically.

26
00:01:19.760 --> 00:01:21.700
It's also helpful when you want to control

27
00:01:21.730 --> 00:01:25.850
the size and position of elements
based on the size of their container.

28
00:01:25.880 --> 00:01:28.210
Flexbox is also a good choice for creating

29
00:01:28.240 --> 00:01:32.340
responsive, mobile friendly layouts
that adapts to different screen sizes.

30
00:01:32.370 --> 00:01:35.290
Now let's get to coding
and explore Flexbox.

31
00:01:35.320 --> 00:01:36.660
You're now looking at my screen

32
00:01:36.690 --> 00:01:41.740
with my editor opened, my simulator open,
and my Metro bundler running here so

33
00:01:41.770 --> 00:01:45.980
that we see all the changes
from our editor in our simulator.

34
00:01:46.010 --> 00:01:50.820
And I would like to talk
about the Flex layout.

35
00:01:50.850 --> 00:01:53.100
First of all, to demonstrate how Flexbox

36
00:01:53.130 --> 00:01:56.460
works, we will need
a view from React native.

37
00:01:56.490 --> 00:01:59.120
Let's save this.

38
00:01:59.200 --> 00:02:01.210
Okay, so let's save this now.

39
00:02:01.240 --> 00:02:08.020
And we're going to be using this view
container to display how Flexbox works.

40
00:02:08.050 --> 00:02:11.100
Usually when you want to use the Flex

41
00:02:11.130 --> 00:02:17.450
property, you would use style and then
you would say Flex and then some number.

42
00:02:17.480 --> 00:02:21.730
And the Flex property is a number
that represents the proportion of space

43
00:02:21.760 --> 00:02:26.420
that a child container should take
up within its parents container.

44
00:02:26.450 --> 00:02:30.860
But since we have no parent here, the Flex
one will take up the whole space.

45
00:02:30.880 --> 00:02:32.420
And if we want to demonstrate that,

46
00:02:32.450 --> 00:02:36.540
we can just give this a background
color and the whole space will be red.

47
00:02:36.570 --> 00:02:38.170
If we're going to delete this,

48
00:02:38.200 --> 00:02:42.140
then we're going to see our white
background because view will not have

49
00:02:42.170 --> 00:02:46.300
height or width set, so it's
going to take up no space.

50
00:02:46.330 --> 00:02:49.420
Great.
So what happens when you use multiple

51
00:02:49.450 --> 00:02:53.660
Flexbox containers as a children
of a single parent container?

52
00:02:53.690 --> 00:02:54.540
Let's see that.

53
00:02:54.570 --> 00:02:59.420
So let's say we have
some children containers here.

54
00:02:59.450 --> 00:03:06.380
Let's say we have two and let's give the
first one some style and let's say

55
00:03:06.410 --> 00:03:11.260
that its value is one and let's give
it a color so that we see this.

56
00:03:11.290 --> 00:03:14.020
And let's give it yellow color and let's

57
00:03:14.050 --> 00:03:21.560
copy this and give this a flex number
of two and let's make this green color.

58
00:03:21.960 --> 00:03:27.340
And for example, if you have two children
flexbox containers within a single parent

59
00:03:27.370 --> 00:03:32.060
container and one has a value of one
and the other has a two,

60
00:03:32.090 --> 00:03:37.780
the second container will take up twice
as much space as the first container.

61
00:03:37.810 --> 00:03:44.300
And if you have three, let's say,
containers and the flex value here is

62
00:03:44.330 --> 00:03:47.900
three and let's give it a color
of black so that we see it.

63
00:03:47.930 --> 00:03:50.300
We're going to see that the one

64
00:03:50.330 --> 00:03:55.980
with the value one will take up one six
of the space and the second one will take

65
00:03:56.010 --> 00:04:01.300
two six of the space and the last one
will take three six of the space.

66
00:04:01.330 --> 00:04:07.060
So this is how the flex
property values work.

67
00:04:07.090 --> 00:04:11.020
And usually when you use view containers,

68
00:04:11.040 --> 00:04:13.740
you're going to see that they're
taking up the whole block.

69
00:04:13.770 --> 00:04:19.880
Even if you give it a width of, let's say
200,

70
00:04:19.960 --> 00:04:24.660
what's going to happen is that the yellow
box will take up the 200 width,

71
00:04:24.690 --> 00:04:31.500
but the view is not going to be placed
next to the green view or black view.

72
00:04:31.530 --> 00:04:34.940
Let's say even if this one is going to be

73
00:04:34.970 --> 00:04:42.380
a width of 200 and they could technically
fit next to each other,

74
00:04:42.410 --> 00:04:46.060
you're going to see that they're
not going to be next to each other.

75
00:04:46.090 --> 00:04:49.780
So what can you do when you want to place,

76
00:04:49.800 --> 00:04:55.260
let's say, yellow, green and black
containers next to each other?

77
00:04:55.280 --> 00:04:57.860
This is when the flex direction comes in.

78
00:04:57.890 --> 00:05:00.100
So if you want to set a flex direction

79
00:05:00.130 --> 00:05:04.420
property and you want its children to be
aligned horizontally,

80
00:05:04.450 --> 00:05:10.300
you could use something called flex
direction and you could set it to row.

81
00:05:10.330 --> 00:05:14.540
And if you set the row value,

82
00:05:14.570 --> 00:05:19.220
you're going to see that its children
is going to be aligned horizontally.

83
00:05:19.250 --> 00:05:24.140
So the flex direction property in react
native's flex box layout determines

84
00:05:24.160 --> 00:05:29.980
the direction of the main axis
on which child elements will be laid out.

85
00:05:30.010 --> 00:05:35.140
So there is the row value and then
there's the row reverse value.

86
00:05:35.170 --> 00:05:37.020
So what this will do is it's going

87
00:05:37.040 --> 00:05:41.900
to reverse the alignment
of the children components.

88
00:05:41.920 --> 00:05:45.020
So if we save this,
we're going to see that yellow,

89
00:05:45.040 --> 00:05:52.220
green and black starting from right
to left instead of left to right.

90
00:05:52.250 --> 00:05:58.500
If we're going to use column here,
this is one other possible value.

91
00:05:58.530 --> 00:06:02.100
The main axis will run vertically from top

92
00:06:02.130 --> 00:06:07.700
to bottom and the cross axis will
run horizontally from left to right.

93
00:06:07.720 --> 00:06:09.020
So if we're going to do this,

94
00:06:09.040 --> 00:06:13.340
we're going to go back to our initial
setup and we're going to see that each

95
00:06:13.360 --> 00:06:17.300
of these views are aligned
in vertical manner.

96
00:06:17.330 --> 00:06:20.220
And then there's column
reverse here as well.

97
00:06:20.250 --> 00:06:24.460
And we're going to see these
columns in a reversed pattern.

98
00:06:24.480 --> 00:06:27.100
So the first thing is going to be black,

99
00:06:27.130 --> 00:06:31.380
then it's going to be green
and then it's going to be yellow.

100
00:06:31.410 --> 00:06:32.180
In conclusion,

101
00:06:32.200 --> 00:06:35.740
the flex direction properties is useful
because it allows you to control

102
00:06:35.770 --> 00:06:38.980
the layout of child elements
in a parent container.

103
00:06:39.000 --> 00:06:40.780
For example, if you want child elements

104
00:06:40.800 --> 00:06:47.180
to be laid out horizontally, you would set
the flex direction to row or row reverse.

105
00:06:47.200 --> 00:06:49.220
If you want child elements to be laid out

106
00:06:49.250 --> 00:06:53.980
vertically, you would set the flex
direction to column or column reverse.

107
00:06:54.010 --> 00:06:58.140
Now let's talk about something
called justify content.

108
00:06:58.170 --> 00:07:03.900
The Justify Content property in react
native's flexbox layout determines how

109
00:07:03.920 --> 00:07:09.100
child elements are aligned along
the primary axis of the container

110
00:07:09.130 --> 00:07:13.380
and the primary axis is determined
by the flex direction property.

111
00:07:13.410 --> 00:07:19.800
So when flex direction is set to row,
the primary axis is horizontal and when

112
00:07:19.830 --> 00:07:24.180
it's set to column,
the primary axis is vertical.

113
00:07:24.210 --> 00:07:29.860
And let's explore what are some
values of justify content.

114
00:07:29.890 --> 00:07:32.180
So for this, let's give this some height

115
00:07:32.210 --> 00:07:37.300
as well so that they are visible better

116
00:07:37.330 --> 00:07:44.140
and the width of 200, let's say.

117
00:07:44.170 --> 00:07:49.020
Let's change these values up.

118
00:07:49.040 --> 00:07:52.500
We don't need the flex
containers here, okay?

119
00:07:52.530 --> 00:07:58.020
So now if we were to delete
this and place them in a row and let's

120
00:07:58.040 --> 00:08:03.420
delete the background color red
as well, let's make it white.

121
00:08:03.450 --> 00:08:09.220
In this case, we're not going to be seeing
the black container actually because

122
00:08:09.250 --> 00:08:14.340
we would need a scroll view
for that because black would be right next

123
00:08:14.360 --> 00:08:17.220
to this green container
and it's overflowing.

124
00:08:17.250 --> 00:08:23.220
So actually let's use smaller values,
maybe like 50 for width

125
00:08:23.250 --> 00:08:26.700
and if we save this now,
we're going to be able to see it here.

126
00:08:26.720 --> 00:08:27.220
Great.

127
00:08:27.250 --> 00:08:31.940
So now let's explore
the Justify Content property.

128
00:08:31.970 --> 00:08:39.400
So Justify Content by default is
set to something called flex start.

129
00:08:42.000 --> 00:08:44.540
And if we save this,
we're going to see that nothing has

130
00:08:44.560 --> 00:08:49.420
changed because this is the default value
and it aligns child elements to the start

131
00:08:49.440 --> 00:08:53.780
of the primary axis which in this
case is horizontal.

132
00:08:53.810 --> 00:08:55.820
And it is useful when you want to align

133
00:08:55.850 --> 00:08:58.940
child elements to the start
of the container.

134
00:08:58.970 --> 00:09:01.500
There also exists something called flex

135
00:09:01.530 --> 00:09:06.580
end and this aligns child elements
to the end of the primary axis and is

136
00:09:06.600 --> 00:09:09.860
useful when you want to align child
elements to the end of the container.

137
00:09:09.890 --> 00:09:12.220
So this is the end of our container.

138
00:09:12.250 --> 00:09:16.500
Now then there is a center value

139
00:09:16.530 --> 00:09:23.660
and this is useful when you want to center
the child elements in the container.

140
00:09:23.690 --> 00:09:25.620
And basically this will center child

141
00:09:25.650 --> 00:09:30.140
elements along the primary axis as well,
which is now horizontal.

142
00:09:30.170 --> 00:09:36.740
Then there exists the space between
value and this distributes child elements

143
00:09:36.770 --> 00:09:40.900
along the primary axis
with equal space between them.

144
00:09:40.920 --> 00:09:42.420
And this is useful when you want

145
00:09:42.440 --> 00:09:46.860
to distribute the child elements
evenly with equal space between them.

146
00:09:46.890 --> 00:09:51.500
So if we save this, we're going
to see equal space between them.

147
00:09:51.530 --> 00:09:54.020
And then there's the last value that is

148
00:09:54.050 --> 00:09:58.820
called space around
and this is used to distribute child

149
00:09:58.850 --> 00:10:03.660
elements along the primary axis
with equal space around them.

150
00:10:03.690 --> 00:10:06.420
Now I want to talk about the Align items

151
00:10:06.440 --> 00:10:12.300
property in react native Flexbox layout
and this determines how child elements are

152
00:10:12.320 --> 00:10:15.620
aligned along the cross axis
of the parent container.

153
00:10:15.650 --> 00:10:18.160
The Align items property can be set to one

154
00:10:18.190 --> 00:10:21.580
of several possible values that we're
going to be discussing now.

155
00:10:21.610 --> 00:10:24.220
So let's use Align items and let's use

156
00:10:24.250 --> 00:10:27.980
flex start which is the default
value here as well.

157
00:10:28.010 --> 00:10:32.700
And this way, child elements are
aligned to the start of the cross axis.

158
00:10:32.720 --> 00:10:36.660
So for example, if you want child elements
to be aligned to the top of the parent

159
00:10:36.690 --> 00:10:41.220
container, you would set the Align
items property to Flex start.

160
00:10:41.250 --> 00:10:46.340
There is also the Flex end property
and this aligns child elements

161
00:10:46.370 --> 00:10:51.700
to the end of the cross axis
and then there is the center one.

162
00:10:51.730 --> 00:10:53.380
And if you use this,

163
00:10:53.410 --> 00:10:58.900
then child elements are centered along
the cross axis and then there's also

164
00:10:58.930 --> 00:11:05.680
the stretch property
and this way child elements are stretched

165
00:11:05.710 --> 00:11:10.000
to feel the entire height of the parent
container along the cross axis.

166
00:11:10.030 --> 00:11:13.500
So if we save this,
you're going to see that nothing is really

167
00:11:13.530 --> 00:11:17.340
stretched and it's because we
have an explicit height set.

168
00:11:17.370 --> 00:11:19.500
But if we delete the height, for example,

169
00:11:19.520 --> 00:11:22.540
you're going to see that it's going
to take up the whole space of the parent

170
00:11:22.570 --> 00:11:27.540
container and stretch this element
and fill the entire height.

171
00:11:27.570 --> 00:11:33.240
And that's what would happen if
we deleted these heights as well.

172
00:11:36.280 --> 00:11:39.860
Actually I deleted the width.

173
00:11:39.890 --> 00:11:41.700
So here we go.

174
00:11:41.730 --> 00:11:46.660
And then there's the baseline value

175
00:11:46.690 --> 00:11:52.960
and if we get our height back here just
for visibility,

176
00:11:57.840 --> 00:12:02.780
we're going to see that child elements are
aligned along their baselines of the cross

177
00:12:02.810 --> 00:12:08.220
axis and the baseline is
going to be at the top.

178
00:12:08.250 --> 00:12:12.860
So if you were to explore what is going

179
00:12:12.890 --> 00:12:17.460
to happen if you were to change the Flex
direction to column

180
00:12:17.490 --> 00:12:21.340
and then experiment with this,
you're going to see that the justified

181
00:12:21.370 --> 00:12:28.380
content is still going to use the space
around to equally distance these items

182
00:12:28.410 --> 00:12:33.220
along its primary axis
which now became vertical.

183
00:12:33.250 --> 00:12:35.540
So basically you could experiment

184
00:12:35.570 --> 00:12:40.860
with this concept and create any
kind of layout that you want.

185
00:12:40.890 --> 00:12:43.120
And this will be very useful when you're

186
00:12:43.150 --> 00:12:48.500
going to be creating complex applications
and you are going to want to make your

187
00:12:48.530 --> 00:12:53.500
applications responsive and not worry
about the screen sizes and the devices

188
00:12:53.530 --> 00:12:57.340
where your application
is going to be run on.

189
00:12:57.370 --> 00:12:59.500
In summary, Flexbox is a powerful layout

190
00:12:59.530 --> 00:13:01.580
system that can help you create flexible

191
00:13:01.610 --> 00:13:04.420
and responsive layouts
in your react native apps.

192
00:13:04.450 --> 00:13:08.300
It's useful when you need to lay out
elements in a single direction, control

193
00:13:08.330 --> 00:13:10.380
the size and position of elements based

194
00:13:10.410 --> 00:13:15.900
on the size of their container, and create
responsive mobile friendly layouts.

195
00:13:15.920 --> 00:13:18.040
Thanks for watching and see
you in the next video.