1
00:00:07,070 --> 00:00:08,270
Welcome back.

2
00:00:08,300 --> 00:00:12,550
In this video, let's talk about a line items.

3
00:00:12,560 --> 00:00:15,350
So what are a line item properly?

4
00:00:15,380 --> 00:00:20,090
Well, it also works on the cross axis.

5
00:00:20,090 --> 00:00:21,260
So have a look.

6
00:00:21,710 --> 00:00:24,020
Let me change this one to RAW.

7
00:00:24,020 --> 00:00:27,410
And after that, we bring it back to column.

8
00:00:27,410 --> 00:00:29,840
So here are going to be a row.

9
00:00:29,960 --> 00:00:32,330
And let me remove this one for now.

10
00:00:32,330 --> 00:00:36,140
And let's see you can see that it is back to normal.

11
00:00:36,140 --> 00:00:39,890
So let's talk about the line items.

12
00:00:39,920 --> 00:00:44,240
Align items also works on the parent container.

13
00:00:44,240 --> 00:00:52,090
So now when I add a line items, we also have these properties base line, center, flex and flex,

14
00:00:52,090 --> 00:00:54,200
start, stretch and many more.

15
00:00:54,230 --> 00:01:00,140
So let's select center and you can see the movements of the align items.

16
00:01:00,140 --> 00:01:01,460
They are line items.

17
00:01:01,460 --> 00:01:12,920
It is moving on the cross axis because the direction is row and from left to right is the main axis

18
00:01:12,920 --> 00:01:17,960
and from top to bottom is my cross axis.

19
00:01:17,960 --> 00:01:21,690
So in that way it is filling up the empty space.

20
00:01:21,980 --> 00:01:25,430
So the center here is going to be this place.

21
00:01:25,670 --> 00:01:26,540
Do you get it?

22
00:01:26,570 --> 00:01:27,320
Yes.

23
00:01:27,620 --> 00:01:32,150
And if I want you to be, let's see what we have.

24
00:01:32,150 --> 00:01:34,220
The additional properties flex n.

25
00:01:34,220 --> 00:01:36,830
So when I say it now have a look.

26
00:01:36,830 --> 00:01:45,320
And indeed it is starting from way from the end because the cross axis is from this side downwards,

27
00:01:45,320 --> 00:01:45,980
downwards.

28
00:01:45,980 --> 00:01:48,440
It means that here is the end.

29
00:01:48,440 --> 00:01:52,610
And if I want to be at this place, it's going to be as what?

30
00:01:52,610 --> 00:01:55,010
Flex starts now.

31
00:01:55,010 --> 00:01:56,870
Here we go.

32
00:01:56,870 --> 00:02:01,040
Flex starts and indeed we have flex starts.

33
00:02:01,040 --> 00:02:09,380
So these are the common properties we are going to use and we can combine a line items and then they

34
00:02:09,380 --> 00:02:11,930
just file content to achieve.

35
00:02:11,930 --> 00:02:13,940
Beautiful effect.

36
00:02:13,940 --> 00:02:18,650
Let's say that I want to position the item at the center here.

37
00:02:18,680 --> 00:02:26,930
How are we going to do it unless you combine these two properties, align items and then justify content?

38
00:02:26,960 --> 00:02:33,110
If I want this item to be at the center of the container, how are you going to achieve it?

39
00:02:33,140 --> 00:02:41,210
Remember, first of all, it needs to move from way, move from left to right at the center here.

40
00:02:41,300 --> 00:02:45,980
And at this point, we can use what is called just flat content center.

41
00:02:45,980 --> 00:02:49,310
So to be at the center here as that remember.

42
00:02:49,340 --> 00:02:50,960
Yes, here.

43
00:02:51,140 --> 00:02:59,870
And if I want it to be at the center here of the entire container, definitely we are going to use a

44
00:02:59,870 --> 00:03:06,410
property on the cross axis and the cross axis is from way from top to bottom.

45
00:03:06,410 --> 00:03:10,520
And because the direction is row, this is a cross axis.

46
00:03:10,520 --> 00:03:15,650
So for this place, when I say a line item center, it'll be here how queries.

47
00:03:15,650 --> 00:03:17,840
So let me show you in code.

48
00:03:17,840 --> 00:03:26,030
So now back here if I provide just five contains to be at the center change this one to center here

49
00:03:26,120 --> 00:03:29,510
and then align items also to be center.

50
00:03:29,510 --> 00:03:39,860
Now have a look a we have something like this and I use that technique to achieve this one to get it.

51
00:03:39,860 --> 00:03:41,930
Now see where we are heading towards.

52
00:03:41,930 --> 00:03:49,760
I use that technique to lay out this one, but for this one inside of center, I use what is called

53
00:03:49,760 --> 00:03:57,770
flex stocks for the align items, not at the center here you see with flex bars we can do many things

54
00:03:57,770 --> 00:03:58,340
with it.

55
00:03:58,610 --> 00:04:03,950
That's the beauty about the align items and then justify content guides.

56
00:04:04,160 --> 00:04:11,870
The next video I will show you the two how we can play around with this concept and we also have properties

57
00:04:11,870 --> 00:04:14,720
on the children or the items.

58
00:04:14,720 --> 00:04:17,060
Let's get into that in the next video.