1
00:00:00,780 --> 00:00:04,780
We've now taken a look at a line items justify content and flex direction.

2
00:00:04,800 --> 00:00:08,140
These are three properties that are always going to be assigned to some parent element.

3
00:00:08,210 --> 00:00:11,870
Is going to change how the children inside that parent are displayed.

4
00:00:11,880 --> 00:00:15,570
There are some other properties that were going to be making use of but these are always going to be

5
00:00:15,570 --> 00:00:21,360
applied to a child and they are flex and align self there technically are one or two other properties

6
00:00:21,360 --> 00:00:24,970
that you could be aware of but we don't very frequently use them on a lot of projects.

7
00:00:25,020 --> 00:00:29,160
So we're gonna really just focus on the ones that we more frequently make use of the first property

8
00:00:29,160 --> 00:00:32,490
we're going to take a look at is the Flex property the Flex property.

9
00:00:32,490 --> 00:00:37,260
We're going to apply it directly to a child and it's going to change how much space that child tries

10
00:00:37,260 --> 00:00:39,530
to take up inside of the parent element.

11
00:00:40,260 --> 00:00:45,190
So we could add on say a value of flex 1 to specifically child 2.

12
00:00:45,390 --> 00:00:51,630
This is going to make child to try to expand and take up as much direction or as much space in the current

13
00:00:51,630 --> 00:00:53,970
flex direction axes.

14
00:00:54,030 --> 00:00:58,980
So remember the default flex direction is column so a flex one on Child 2 means that child 2 is going

15
00:00:58,980 --> 00:01:02,510
to take up as much vertical space as it possibly can.

16
00:01:02,550 --> 00:01:06,640
Let's try going back over to our code editor and testing this out okay.

17
00:01:06,650 --> 00:01:13,620
So back inside my style's object I'm going to rename textile right here and change it to text 1 style.

18
00:01:13,940 --> 00:01:15,740
I'm going to duplicate that down twice

19
00:01:18,660 --> 00:01:25,890
like so on the second one I'll change the name to text to and then on the third one I'll do text loops

20
00:01:26,580 --> 00:01:32,500
text 3 like so and then going to apply each of these to the three text elements that we have.

21
00:01:32,920 --> 00:01:39,660
The first one will be text 1 Style Text 2 And text 3.

22
00:01:39,750 --> 00:01:41,890
I'm also going to change my view style right here.

23
00:01:41,910 --> 00:01:47,070
I'm going to restore some the default functionality so I'm gonna do a removal of flex direction and

24
00:01:47,070 --> 00:01:49,510
justified content.

25
00:01:49,640 --> 00:01:55,480
OK so let's not try doing the same thing we saw on that diagram so I can apply a flex one to text to

26
00:01:55,480 --> 00:01:59,770
style right here so I'll add on flex of one all right.

27
00:01:59,770 --> 00:02:05,890
So that's going to cause child 2 to expand and take up as much vertical space as it possibly can.

28
00:02:06,000 --> 00:02:11,310
Remember flex is going to operate in the same direction as the current value of flex direction.

29
00:02:11,490 --> 00:02:18,870
So if we add in a two though our view style a flex direction of row that's going to mean that flex 1

30
00:02:18,900 --> 00:02:24,150
is going to cause our second child to now try to take up as much space in the horizontal direction as

31
00:02:24,150 --> 00:02:25,520
it can.

32
00:02:25,530 --> 00:02:31,480
So when I save that I can now see child to taking up as much horizontal space as possible.

33
00:02:31,560 --> 00:02:38,760
I'm going to remove flex direction like so and then we're back to the default behavior so multiple elements

34
00:02:38,760 --> 00:02:42,260
inside of one parent can have that flex property assigned.

35
00:02:42,360 --> 00:02:47,520
In this example right here I put on a flex of one two child two and child three which means that they're

36
00:02:47,520 --> 00:02:53,490
both going to expand and take up as much space as possible inside the parent but kind of share the space

37
00:02:53,490 --> 00:02:54,320
that is available.

38
00:02:55,520 --> 00:03:01,100
We could do a flex one on all children that will make them all expand and share all available space

39
00:03:02,380 --> 00:03:04,180
let's try both those really quickly.

40
00:03:04,390 --> 00:03:05,990
So on text 2 right here.

41
00:03:06,160 --> 00:03:08,780
I've got flex one on our text 3 style.

42
00:03:08,790 --> 00:03:14,380
I'll add in a flex one as well save that and now we'll see.

43
00:03:14,390 --> 00:03:21,300
CHILD 2 and child 3 have expanded but shared all the available space so we can also do a flex one two.

44
00:03:21,310 --> 00:03:21,910
Text 1

45
00:03:24,980 --> 00:03:30,420
and now all 3 You're gonna take up some equal amount of space same rules apply.

46
00:03:30,440 --> 00:03:38,580
So if we add in a flex direction to our parent of Ro they'll now take up as much horizontal space as

47
00:03:38,970 --> 00:03:42,670
possible but distribute that space among themselves.

48
00:03:42,800 --> 00:03:47,880
Now the last thing you need to understand around this flex property is that we can have non property

49
00:03:47,880 --> 00:03:53,160
or values that are something other than one and that's going to essentially try to proportion the available

50
00:03:53,160 --> 00:03:55,220
space to each of these children.

51
00:03:55,230 --> 00:04:00,510
So in this example right here we've got a child one with a flex for child 2 as flex 4 and child 3 as

52
00:04:00,510 --> 00:04:03,800
flex to figure out how much space is going to be allocated.

53
00:04:03,900 --> 00:04:06,600
We add up all those different flex values.

54
00:04:06,600 --> 00:04:10,530
So in this case we would have four plus four plus two equals 10.

55
00:04:10,770 --> 00:04:16,190
So essentially we can imagine that this entire parent gets split into 10 equal sections.

56
00:04:16,260 --> 00:04:21,510
We then proportion some amount of space according to that flex value.

57
00:04:21,510 --> 00:04:27,150
So in other words child 1 and 2 we get 40 percent of the available space and child 3 because as the

58
00:04:27,150 --> 00:04:32,050
value of flex of two would get only 20 percent of the space that is available.

59
00:04:32,070 --> 00:04:38,500
Let's try testing out this scenario as well back over here I'm going to remove the Flex direction on

60
00:04:38,500 --> 00:04:49,070
the parent I'll then put a flex of 4 4 and 2 like so we can save that and now we'll see that we've got

61
00:04:49,100 --> 00:04:53,630
essentially 40 percent 40 percent and then 20 percent to child 3.

62
00:04:53,790 --> 00:04:58,220
Okay so that's pretty much it for the Flex value we're going to use it anytime that we want a child

63
00:04:58,220 --> 00:05:00,590
to expand and fill up some available space.

64
00:05:00,590 --> 00:05:02,490
And that's pretty much it.

65
00:05:02,570 --> 00:05:06,620
Let's take a quick pause right here and there's just one less property we're going to take a look at

66
00:05:06,650 --> 00:05:07,760
which is a line so.