1
00:00:02,230 --> 00:00:08,100
In this lecture, I want to dive a bit deeper into flexbox, especially regarding how you use it in React

2
00:00:08,110 --> 00:00:08,690
Native apps.

3
00:00:08,710 --> 00:00:12,310
If you know all about that already, you can of course skip this lecture.

4
00:00:12,340 --> 00:00:14,920
So for this, I prepared a simple dummy application

5
00:00:14,920 --> 00:00:20,420
and of course you find that attached, it's a normal React Native app built with expo and in the app.js

6
00:00:20,460 --> 00:00:26,890
file here, what I have in the end is just a view with three views in there where each view then has a

7
00:00:26,890 --> 00:00:29,990
text with text one, two, three,

8
00:00:30,010 --> 00:00:36,310
this simply creates some boxes with different colors - red, blue and green and now we'll use flexbox

9
00:00:36,310 --> 00:00:41,950
to move these boxes around so that you can get a feeling for how flexbox works because it's so important.

10
00:00:42,240 --> 00:00:43,240
Now

11
00:00:43,660 --> 00:00:49,120
first things first, by default every view in React Native,

12
00:00:49,120 --> 00:00:55,410
even if you assign no special styles uses flexbox and that's different to the web for example, there

13
00:00:55,420 --> 00:01:01,370
if you have a div which would be your equivalent to a view kind of, it doesn't use flexbox by default.

14
00:01:01,450 --> 00:01:08,260
In React Native, it does, every view by default organizes its children with the help of this flexbox

15
00:01:08,350 --> 00:01:15,490
thing, flexbox simply is a term, is simply a concept from CSS that is all about organizing child

16
00:01:15,520 --> 00:01:17,440
elements in a one-dimensional space,

17
00:01:17,440 --> 00:01:21,990
so here for example in a column. That's also another default,

18
00:01:21,990 --> 00:01:29,340
not only does every view by default use flexbox, it also by default organizes children in a column,

19
00:01:29,340 --> 00:01:33,020
so from top to bottom. That's also a difference to the web

20
00:01:33,020 --> 00:01:37,350
and I don't want to emphasize these differences too much because of course you don't need to be a web

21
00:01:37,350 --> 00:01:42,400
developer to build React Native apps but I think a lot of people do know web development,

22
00:01:42,400 --> 00:01:47,400
do know CSS flexbox and therefore it makes sense to also talk about the differences. So in the

23
00:01:47,400 --> 00:01:48,840
web when you use flexbox, 

24
00:01:48,840 --> 00:01:51,220
not only is it not turned on by default,

25
00:01:51,240 --> 00:01:56,820
in addition if you do turn it on, the default is to organize all child elements in a row and here, the default

26
00:01:56,820 --> 00:01:59,010
is to organize them in a column.

27
00:01:59,010 --> 00:02:05,910
You can change that default though, so in this case on the view which holds my boxes, by adding flex direction

28
00:02:05,910 --> 00:02:12,960
here and setting this to row for example, now you will see that these three boxes are organized in a row

29
00:02:12,960 --> 00:02:16,560
from left to right. Now besides row and column,

30
00:02:16,560 --> 00:02:19,250
you also have row reverse and column reverse

31
00:02:19,260 --> 00:02:21,720
and this simply also does what the name implies.

32
00:02:21,720 --> 00:02:29,010
Now we still have a row but the first element, the red box actually is on the right and not on left anymore,

33
00:02:29,010 --> 00:02:30,820
so that's also something you can do,

34
00:02:30,840 --> 00:02:36,210
let me go back to row though. So that's the the first thing you can do.

35
00:02:36,210 --> 00:02:42,750
Another important thing about flexbox is how child elements are sized, here

36
00:02:42,810 --> 00:02:47,040
I gave every child element a width and a height of 100.

37
00:02:47,070 --> 00:02:54,660
Now if we would remove that width and height thing on every child element, then you will see that now we

38
00:02:54,660 --> 00:03:01,890
have a very small row here because every box now is only as wide as its child requires it

39
00:03:01,890 --> 00:03:05,700
to be and only as tall as its child requires it to be,

40
00:03:05,700 --> 00:03:11,180
so every box here which holds a number is only as wide and tall as the number it's containing.

41
00:03:11,340 --> 00:03:18,180
Now you can change that with the surrounding flexbox container too. Let's give that a width of let's say

42
00:03:18,330 --> 00:03:22,740
300 pixels or of 80% of the parent width,

43
00:03:22,740 --> 00:03:28,950
so in this case since it's the root element, of the device width and let's give it a height of let's say

44
00:03:29,020 --> 00:03:30,230
300.

45
00:03:30,480 --> 00:03:36,720
If we do that and now really important, I'm doing this on the view which holds all these boxes, I'm not

46
00:03:36,720 --> 00:03:39,380
doing it on the boxes themselves.

47
00:03:39,480 --> 00:03:45,050
So if we assign this width and height on the surrounding box, you see something interesting,

48
00:03:45,150 --> 00:03:48,250
the height is assumed for all the elements,

49
00:03:48,270 --> 00:03:54,810
now all the views in the flexbox take the height of the parent, the width has no impact here.

50
00:03:54,870 --> 00:03:59,510
That's also a default behaviour you've got here, obviously since we haven't changed anything.

51
00:03:59,760 --> 00:04:06,840
The default behaviour here indeed is that the child elements in a flexbox,

52
00:04:06,850 --> 00:04:15,360
so in this outer view here, are organized such that they align themselves along the cross axis by stretching.

53
00:04:15,490 --> 00:04:20,510
Okay, that were a lot of terms, what does this mean? Now when working with flexbox,

54
00:04:20,530 --> 00:04:29,290
we have two important axis. The main axis depends on your flex direction, for a row which we have here,

55
00:04:29,350 --> 00:04:37,690
flex direction row, the main axis is from left to right. For row reverse, it would be right to left, for

56
00:04:37,690 --> 00:04:42,570
column, it would be top to bottom and for column reverse, it would be bottom to top,

57
00:04:42,580 --> 00:04:44,270
so that's the main axis

58
00:04:44,620 --> 00:04:48,630
and then you also have a cross axis and that's simply the opposite of the main axis.

59
00:04:48,640 --> 00:04:56,110
So for a row where the main axis is from left to right, the cross axis would be from top to bottom. If

60
00:04:56,110 --> 00:05:01,900
the main axis is from right to left which would be the case for row reverse, then the cross axis would

61
00:05:01,900 --> 00:05:03,100
be from bottom to top.

62
00:05:03,340 --> 00:05:06,940
Okay, so that's the main axis and cross axis concept.

63
00:05:06,940 --> 00:05:13,060
Now you can organize your child elements, so in this view where we have the three boxes as child elements,

64
00:05:13,360 --> 00:05:20,170
you can organize these child elements along this axis. You use justify content to organize elements

65
00:05:20,200 --> 00:05:27,760
along the main axis and you have align items to organize elements around the cross axis.

66
00:05:27,760 --> 00:05:31,040
Now you see the values you got for justify content here

67
00:05:31,090 --> 00:05:37,230
if you add these quotes or if you place your cursor in there and you hit control space. You see you

68
00:05:37,230 --> 00:05:44,040
can center elements, you can position them at the end or at the start of that container or you can add

69
00:05:44,040 --> 00:05:45,270
some space in between,

70
00:05:45,300 --> 00:05:52,500
for example if we use space between here and we use align item center, then things will change.

71
00:05:52,500 --> 00:05:57,490
Now you will see there taking the width of the surrounding container,

72
00:05:57,540 --> 00:06:03,360
every box itself still is pretty small but they're split or they're distributed across the width of

73
00:06:03,360 --> 00:06:09,570
the parent container and they're no longer taking the height because along the cross axis, we're aligning

74
00:06:09,570 --> 00:06:12,960
them with align items and there, I set this to center.

75
00:06:13,020 --> 00:06:19,620
The default here is stretch and if I set it back to stretch, then unsurprisingly they do stretch for

76
00:06:19,620 --> 00:06:20,960
the entire height.

77
00:06:20,970 --> 00:06:26,490
Now if you want to make sure that they take the available width, you can't set stretch here on justify

78
00:06:26,490 --> 00:06:32,820
content which is your main axis positioning vehicle, so you can't set stretch here.

79
00:06:32,980 --> 00:06:35,880
So what can you do regarding that then?

80
00:06:35,890 --> 00:06:40,780
Well, that is something you now configure on every child item itself.

81
00:06:40,810 --> 00:06:50,290
You can tell a child item how much space it should take off the space it's potentially getting. Stretch

82
00:06:50,290 --> 00:06:54,220
here is kind of a special case, there you set this up on the parent item,

83
00:06:54,220 --> 00:06:56,640
normally you set this up on the child item.

84
00:06:56,680 --> 00:07:02,200
So for example if I set this to center now so that the parent doesn't tell the child how much space

85
00:07:02,200 --> 00:07:08,950
it should take, then we can fully control the space a child takes by going to the child style and there,

86
00:07:08,950 --> 00:07:17,410
you can add flex, the flex property. The flex property is applied to items that are inside of a flexbox,

87
00:07:17,410 --> 00:07:19,730
so that are inside of a view

88
00:07:19,810 --> 00:07:25,660
in this case here and that can be a view itself but that could also be another component like a text

89
00:07:25,660 --> 00:07:27,150
for example.

90
00:07:27,160 --> 00:07:31,320
So now here, you can add flex and you can set this to a value of one for example,

91
00:07:31,330 --> 00:07:35,940
so flex needs to be a number. If you set this to one, what you will see is that

92
00:07:35,950 --> 00:07:44,050
now the red container where I did set flex to 1 takes all the available width it can get just so much

93
00:07:44,110 --> 00:07:50,440
that it leaves enough space for the blue and the green container so that they can squeeze their content

94
00:07:50,620 --> 00:07:52,470
into the surrounding flexbox.

95
00:07:52,480 --> 00:07:58,360
Now we can't see the boundaries of the surrounding container but the boundaries would essentially be where

96
00:07:58,600 --> 00:08:03,060
the red item starts and the green item and so on the horizontal axis here.

97
00:08:04,720 --> 00:08:11,020
So now flex one makes sure that the red item gets as big as it can get,

98
00:08:11,170 --> 00:08:17,140
so it takes as much space as it can get. By default, views only take as much space as their child elements

99
00:08:17,140 --> 00:08:17,690
require,

100
00:08:17,710 --> 00:08:24,040
so as this one character required but with flex one, you change this and they now take as much space along

101
00:08:24,040 --> 00:08:25,140
the main axis,

102
00:08:25,150 --> 00:08:29,140
so along the width here, as they can get. For the cross axis,

103
00:08:29,140 --> 00:08:34,310
again that's a special case, you have to do this on the parent. For the main axis

104
00:08:34,360 --> 00:08:38,790
and since we have row here, the main axis is a horizontal axis from left to right,

105
00:08:38,800 --> 00:08:41,520
you do this with the flex property on a child.

106
00:08:42,700 --> 00:08:48,550
Now of course you can add flex to other child elements as well, like that second to the blue container

107
00:08:48,550 --> 00:08:50,260
with the two in there,

108
00:08:50,260 --> 00:08:52,420
you can add flex one there as well.

109
00:08:52,420 --> 00:08:56,690
So now I have flex one on the red container and flex one on the blue container and

110
00:08:56,710 --> 00:09:03,790
what now happens is that both of them take the available free space and amongst these two boxes, the

111
00:09:03,790 --> 00:09:08,870
space is distributed evenly and that's what this number here indicates.

112
00:09:08,930 --> 00:09:11,210
This number is a relative number,

113
00:09:11,210 --> 00:09:18,350
all items in the same flexbox, with the flex property distribute the available space by considering

114
00:09:18,410 --> 00:09:23,130
the number you assign here and these numbers are relative to each other.

115
00:09:23,140 --> 00:09:29,800
So if I give the blue container flex two here, then this means that of the available space you have

116
00:09:29,950 --> 00:09:36,100
in that surrounding container, after deducting the space every element needs to squeeze its content in

117
00:09:36,100 --> 00:09:36,840
there,

118
00:09:36,970 --> 00:09:42,480
the blue container will take twice as much space as this one because here we have flex one, 

119
00:09:42,490 --> 00:09:43,760
here we have flex two,

120
00:09:43,810 --> 00:09:50,560
if we had flex three here, then this would take three-fifths of the available free space because we have

121
00:09:50,560 --> 00:09:52,150
three plus two,

122
00:09:52,210 --> 00:09:58,300
so we have 5 available segments so to say and here the red container would take 3 segments, blue container

123
00:09:58,300 --> 00:09:59,950
would take 2 segments.

124
00:09:59,950 --> 00:10:05,950
If we have 1 and 2, then we have three available segments and the blue container takes two of them,

125
00:10:06,070 --> 00:10:13,510
red takes one, so you always add up these flex numbers and then distribute or that's automatically done

126
00:10:13,510 --> 00:10:17,680
of course but then the available space is distributed accordingly.

127
00:10:17,680 --> 00:10:22,660
So now here, we'll see that the blue container is twice as big as the red one or it takes twice as much

128
00:10:22,660 --> 00:10:25,090
free space as the red one.

129
00:10:25,090 --> 00:10:27,090
So this is how you can work with flex,

130
00:10:27,130 --> 00:10:33,760
you can organize how items are positioned with flex direction, with justify content and with align

131
00:10:33,790 --> 00:10:39,370
items and you can also make your items grow and shrink with the help of flex.

132
00:10:39,430 --> 00:10:44,490
So now that's a brief introduction to flexbox in React Native,

133
00:10:44,560 --> 00:10:51,070
as I said inspired by Flexbox for CSS, so if you knew that, all of what I explained here is probably

134
00:10:51,070 --> 00:10:52,280
not new to you.

135
00:10:52,450 --> 00:10:54,610
We'll work with flexbox throughout this course,

136
00:10:54,610 --> 00:10:58,900
so there things will also become clearer and we'll work a lot with it and you'll see how you can create

137
00:10:58,930 --> 00:11:05,170
beautiful user interfaces with flexbox, flexbox in the end is the tool in React Native to structure

138
00:11:05,170 --> 00:11:10,570
your content on a page, to organize your content and you will typically work with a lot of views which

139
00:11:10,570 --> 00:11:15,190
you also nest into each other so that you can position elements the way you want because of course

140
00:11:15,190 --> 00:11:16,720
and that's also important,

141
00:11:16,840 --> 00:11:21,680
you don't just have to have one view in your app which uses flexbox,

142
00:11:21,730 --> 00:11:26,050
you could have another view in there which also uses flexbox and actually as I mentioned, every

143
00:11:26,050 --> 00:11:31,570
view by default uses flexbox and you can then nest these views into each other so that you position

144
00:11:31,600 --> 00:11:35,070
everything the way you want and you'll also see this in this module already

145
00:11:35,140 --> 00:11:41,200
and actually, I'm already doing it here. In my views here which are in the surrounding view, so my boxes

146
00:11:41,200 --> 00:11:47,710
here, there I also use justify content and align items to center my numbers in these boxes, so that

147
00:11:47,710 --> 00:11:54,070
1, 2 and 3 are centered there horizontally and vertically and that works because we have flexbox turned

148
00:11:54,070 --> 00:12:00,700
on by default and we can't turn it off by the way and therefore, I just use these two properties here

149
00:12:00,700 --> 00:12:08,320
to align my content of this view along the main and the cross axis and here since I set no special flex

150
00:12:08,320 --> 00:12:14,170
direction for this view, the main axis is top to bottom because the default flex direction is column

151
00:12:14,530 --> 00:12:16,420
and the cross axis is left to right.

152
00:12:16,420 --> 00:12:17,440
That's just a side note.