1
00:00:00,840 --> 00:00:01,140
All right.

2
00:00:01,140 --> 00:00:03,070
Just one less flex box property.

3
00:00:03,090 --> 00:00:04,900
This one is going to be a line self.

4
00:00:05,100 --> 00:00:10,410
It's another property that we're going to add on to child elements align self essentially overrides

5
00:00:10,410 --> 00:00:13,390
the value of a line items on the parent element.

6
00:00:13,650 --> 00:00:16,410
Let's take a look at a diagram or two okay.

7
00:00:16,440 --> 00:00:20,810
So remember by default a line items has a value of stretch.

8
00:00:20,820 --> 00:00:25,020
That means that on the parent element all of its children are going to try to stretch in the horizontal

9
00:00:25,020 --> 00:00:28,360
direction and fill up as much space as possible.

10
00:00:28,410 --> 00:00:32,580
We can override that by placing a line self on some child element.

11
00:00:32,580 --> 00:00:37,800
So in this example right here we can imagine that we set a line self of flex end on child to that's

12
00:00:37,800 --> 00:00:41,640
going to make child to move all the way to the right hand side the screen.

13
00:00:41,700 --> 00:00:47,850
We could also do say a flex or me aligned self of center that's going to center child 2 or even flex

14
00:00:47,850 --> 00:00:52,290
start which will push child you all the way to the left hand side instead.

15
00:00:52,320 --> 00:00:55,540
So as usual let's test this out really quickly OK.

16
00:00:55,550 --> 00:01:03,950
Back over here I'm going to remove the Flex properties that I added in so flex 4 and 4 and 2 are now

17
00:01:03,950 --> 00:01:04,870
gone.

18
00:01:04,870 --> 00:01:06,700
I say this again.

19
00:01:06,770 --> 00:01:07,750
There we go.

20
00:01:07,770 --> 00:01:11,340
Let's not try applying a line self to child number two.

21
00:01:11,520 --> 00:01:18,910
First try out a value of center which should make child two alone center on the screen.

22
00:01:18,940 --> 00:01:20,500
I'll save it and Yup.

23
00:01:20,600 --> 00:01:20,960
Sure enough.

24
00:01:20,960 --> 00:01:22,130
There we go.

25
00:01:22,160 --> 00:01:29,810
We can also do a flex start that's going to move that all the way to a left hand side and a flex end

26
00:01:31,030 --> 00:01:32,690
simple enough.

27
00:01:32,730 --> 00:01:37,570
Now we can also change the default or we can change a line items on view style up here.

28
00:01:37,590 --> 00:01:47,720
Let's say that we set a a line items of center so now Child 1 and 3 should center themselves.

29
00:01:47,730 --> 00:01:50,020
But child 2 will remain on the right hand side.

30
00:01:50,670 --> 00:01:52,190
So I'll say this once again.

31
00:01:52,440 --> 00:01:53,740
And there we go.

32
00:01:53,790 --> 00:01:59,100
We can also set in a line self of say stretch which is now going to make child number two stretch the

33
00:01:59,100 --> 00:01:59,760
entire width.

34
00:02:00,030 --> 00:02:04,040
But one and three are going to stay centered so I'll say that once again.

35
00:02:04,180 --> 00:02:05,770
And there we go.

36
00:02:05,800 --> 00:02:06,040
OK.

37
00:02:06,070 --> 00:02:08,220
So again a self pretty straight forward.

38
00:02:08,230 --> 00:02:12,850
It's just going to allow us to override the line items on the parent element.

39
00:02:12,850 --> 00:02:13,200
OK.

40
00:02:13,220 --> 00:02:14,960
That's pretty much it for Flex box.

41
00:02:14,980 --> 00:02:18,610
So there's one last system we're going to take a look at and we're going to combine all these three

42
00:02:18,610 --> 00:02:23,050
systems together you know learn how we can actually set up an effective layout for our applications.