1
00:00:08,039 --> 00:00:09,450
Welcome back.

2
00:00:09,570 --> 00:00:18,330
Now that we know the main axis and then the cross axis, let's see how we can arrange the items the

3
00:00:18,330 --> 00:00:19,580
way we want it.

4
00:00:19,590 --> 00:00:24,120
So we are going to use additional property on the parent.

5
00:00:24,120 --> 00:00:31,230
So let's bring back the weight of 500 on each of the children.

6
00:00:31,230 --> 00:00:36,210
So now back to 150, 150 as we have before.

7
00:00:36,210 --> 00:00:40,230
And for the meantime, let's work with the road.

8
00:00:40,350 --> 00:00:41,190
Great.

9
00:00:41,190 --> 00:00:43,380
So here we go.

10
00:00:43,410 --> 00:00:51,870
You can see that there are more spaces, what is not occupied, and we want these items to be filled

11
00:00:51,870 --> 00:00:52,290
up.

12
00:00:52,290 --> 00:00:54,240
So how are we going to do it?

13
00:00:54,240 --> 00:00:55,050
Let's see.

14
00:00:55,350 --> 00:01:02,460
Now the main access is from where is from top left corner to right.

15
00:01:02,460 --> 00:01:09,270
So for this one we can use just five content to spread the remaining spaces.

16
00:01:09,270 --> 00:01:15,420
So on the parent, which is a container when I add this content.

17
00:01:15,420 --> 00:01:24,720
So the value for just for content are baseline center and flex and flex starts space around and space

18
00:01:24,720 --> 00:01:25,320
between.

19
00:01:25,320 --> 00:01:28,950
Let's explore more when I say center.

20
00:01:28,950 --> 00:01:31,560
Now have a look before I save it.

21
00:01:31,590 --> 00:01:38,850
Now the width of the parent is from here to here and it has occupied the space.

22
00:01:38,850 --> 00:01:47,070
When I say center, meaning that I want the items to be at the center of the parent on the main axis.

23
00:01:47,070 --> 00:01:50,190
So the main axis is this one, right?

24
00:01:50,190 --> 00:01:53,640
So let's see if I save it here.

25
00:01:53,730 --> 00:01:55,050
Now have a look.

26
00:01:55,050 --> 00:02:00,660
Now you can say that it is at the center on the main axis.

27
00:02:00,690 --> 00:02:01,350
Great.

28
00:02:01,350 --> 00:02:10,020
And if I want to spread up, I'm going to use what is called space between when I save it.

29
00:02:10,020 --> 00:02:17,550
Now they have spread it out on the main axis, how cool it is and how easy it is.

30
00:02:17,550 --> 00:02:24,930
And if I want to have some space around it, going to be space around, you can see that there are spaces

31
00:02:24,930 --> 00:02:28,440
around individual items as that.

32
00:02:28,440 --> 00:02:30,600
That is a space in for you.

33
00:02:30,630 --> 00:02:37,770
So you are going to use center space between space around many times.

34
00:02:37,770 --> 00:02:40,260
So be familiar with a values.

35
00:02:40,260 --> 00:02:42,240
That's a behavior of it.

36
00:02:42,630 --> 00:02:52,080
But if I change the direction of this one, the movement of the main axis is going to change.

37
00:02:52,110 --> 00:02:53,520
Now have a look.

38
00:02:53,550 --> 00:02:59,520
If I change this one to row reverse, so let's save it and let's have a look.

39
00:02:59,520 --> 00:03:00,930
You see, the movement now.

40
00:03:00,960 --> 00:03:10,830
Now is from where is for right to left this way again, if I change this one to around the same thing

41
00:03:10,830 --> 00:03:14,820
or space between so is going to be between eight and nine.

42
00:03:14,850 --> 00:03:22,350
We see that there is space between the items that is the row, reverse and row.

43
00:03:22,350 --> 00:03:25,830
So what about if the direction is column?

44
00:03:26,100 --> 00:03:31,620
Now let's change this one to column and let's remove this one for now.

45
00:03:31,620 --> 00:03:37,050
And you can see now tell me the main axis and then the cross axis.

46
00:03:37,320 --> 00:03:43,350
Well, by default the main axis is from where it from top to bottom.

47
00:03:43,440 --> 00:03:49,980
So in this way we have some empty space on the main axis, which is this one.

48
00:03:50,550 --> 00:03:59,250
You see that there are some empty space here, so we can spread up the items to occupy the empty spaces.

49
00:03:59,250 --> 00:04:07,860
So now back here, if I make this of justified content to be center, you see that it's moving on the

50
00:04:07,860 --> 00:04:09,390
main axis.

51
00:04:09,390 --> 00:04:12,360
On the main axis, perfect.

52
00:04:12,360 --> 00:04:17,760
So what about if I want to make use of space around as that?

53
00:04:17,760 --> 00:04:19,440
You can see the movement too.

54
00:04:19,680 --> 00:04:23,040
There are some spacing around the heading.

55
00:04:23,040 --> 00:04:26,940
And what about space between the same thing?

56
00:04:26,970 --> 00:04:27,780
I start.

57
00:04:27,780 --> 00:04:31,080
So let's say that you want something like this in your application.

58
00:04:31,080 --> 00:04:31,650
Why not?

59
00:04:31,650 --> 00:04:34,110
You can go ahead and use these properties.

60
00:04:34,110 --> 00:04:39,030
So if I change this one to reverse, now have a look.

61
00:04:39,120 --> 00:04:41,370
You see that everything has been reversed.

62
00:04:41,370 --> 00:04:44,400
So I have showed you these two properties.

63
00:04:44,400 --> 00:04:48,510
That is the flex direction and then the justified content.

64
00:04:48,510 --> 00:04:56,700
Remember, that's far contained works on the main axis, whether from left to right or top to bottom

65
00:04:56,700 --> 00:04:59,370
or bottom to top or right to left.

66
00:04:59,370 --> 00:05:07,050
So you use this for content to control the movement of the items on the main axis.

67
00:05:07,050 --> 00:05:07,590
So.

68
00:05:07,900 --> 00:05:15,860
Let's take it that I want this item to be at the center of the container here or my parents.

69
00:05:15,880 --> 00:05:17,770
How are you going to do it?

70
00:05:17,920 --> 00:05:20,680
Let's get into that in the next video.