1
00:00:08,540 --> 00:00:09,710
In this video.

2
00:00:09,740 --> 00:00:18,950
Let me show you how we can visualize the main axis and then the cross axis using Flexbox playground,

3
00:00:18,950 --> 00:00:19,550
too.

4
00:00:19,850 --> 00:00:27,440
If you go to Flexbox dot tag, you're going to have this beautiful tool to play around with Flexbox.

5
00:00:27,920 --> 00:00:28,280
Okay.

6
00:00:28,280 --> 00:00:36,650
So let's see if we see that for Flexbox, it lies on to concept container and then the item, as we

7
00:00:36,650 --> 00:00:38,210
have discussed before.

8
00:00:38,450 --> 00:00:44,840
So let's say that I want to add a container, and this is my container on the page.

9
00:00:45,230 --> 00:00:48,710
So for the container, let's add an item.

10
00:00:48,710 --> 00:00:52,940
When I click on this one, you see that I have item one.

11
00:00:52,940 --> 00:01:01,400
And for the parent container, we have this properties as we discuss flex direction, flex wrap just

12
00:01:01,400 --> 00:01:06,700
for containers and then the align items and then the align contents.

13
00:01:06,710 --> 00:01:12,260
So these are the properties that we can use on the container of Flexbox.

14
00:01:12,260 --> 00:01:13,550
So now let's see.

15
00:01:13,700 --> 00:01:17,090
So when I say the main axis, now have a look.

16
00:01:17,240 --> 00:01:22,190
When I add additional item, do you see the movement is from where?

17
00:01:22,190 --> 00:01:26,190
From top left corner towards this section.

18
00:01:26,210 --> 00:01:33,020
So for this one, the main axis is from where it's from left to right.

19
00:01:33,170 --> 00:01:36,440
If I add one more, have a look at the movement.

20
00:01:36,470 --> 00:01:38,300
Here we go.

21
00:01:38,330 --> 00:01:41,320
But let's see if I add one more.

22
00:01:41,330 --> 00:01:46,580
Well, there is no space to want to contain the other element.

23
00:01:46,580 --> 00:01:53,270
And if I add more, it could say that it is moving outside the parent container.

24
00:01:53,840 --> 00:01:59,860
So let's say that I want the other element to be on the next line.

25
00:01:59,870 --> 00:02:03,410
That is why we use what is called flex wrap.

26
00:02:03,560 --> 00:02:06,530
So by default it is set to no wrap.

27
00:02:06,530 --> 00:02:10,729
When I change to wrap, you can see that now they are back.

28
00:02:10,759 --> 00:02:17,790
That is how flex wrap works and we can use this one to implement responsive design.

29
00:02:17,810 --> 00:02:23,320
So if I remove the items, let's see again the movement.

30
00:02:23,330 --> 00:02:30,860
When I add one more, you see the movement from left to right and now the cross axis is from where it's

31
00:02:30,860 --> 00:02:32,030
from top here.

32
00:02:32,030 --> 00:02:33,140
Down here.

33
00:02:33,170 --> 00:02:41,690
In this way we can use what is called the align items to position this element, because here there

34
00:02:41,690 --> 00:02:43,190
are more space here.

35
00:02:43,190 --> 00:02:47,720
So I can push this one at the center here or at the side here.

36
00:02:47,720 --> 00:02:53,210
For the meantime, let's explore the main axis and then cross axis.

37
00:02:53,210 --> 00:02:58,160
So now we know the main axis when the direction is row.

38
00:02:58,400 --> 00:03:06,110
So let's remove the item here, the individual children or item here, and let's change the direction

39
00:03:06,110 --> 00:03:07,550
to row reversed.

40
00:03:07,580 --> 00:03:14,600
Now have a look when I add you see where it's starting from, starting from way top right corner here

41
00:03:14,720 --> 00:03:15,910
to left.

42
00:03:15,920 --> 00:03:24,170
When I add one more, we see the movement and now my cross axis is from way from the top right corner

43
00:03:24,170 --> 00:03:30,960
to bottom, and I can use the align items to position these items also.

44
00:03:30,980 --> 00:03:37,130
So let's remove this ones and let's start with the column and see the movements.

45
00:03:37,520 --> 00:03:40,780
So let me change the direction to column.

46
00:03:40,790 --> 00:03:42,800
Now let's add an item.

47
00:03:42,830 --> 00:03:50,120
If we see that this is what in column, if I add more, you see that the movement is from where left

48
00:03:50,150 --> 00:03:55,400
up here to bottom, that is the movement of the column.

49
00:03:55,400 --> 00:04:02,030
So the main and this is from where from top to bottom in this order and I can add more.

50
00:04:02,030 --> 00:04:07,410
And you see that because it is drop now it is moving to the next line.

51
00:04:07,430 --> 00:04:13,280
Now, the cross axis is from way from top left corner to right.

52
00:04:13,280 --> 00:04:18,560
That is it about the main axis and then the cross axis.

53
00:04:18,560 --> 00:04:22,880
So if I change to reverse, you can see that I have reversed it.

54
00:04:22,880 --> 00:04:25,700
And now let's look at the main axis.

55
00:04:25,700 --> 00:04:27,350
The main axis is from where?

56
00:04:27,350 --> 00:04:29,030
From bottom here to top.

57
00:04:29,150 --> 00:04:30,080
That is it.

58
00:04:30,080 --> 00:04:35,420
So now you know the differences between main axis and cross axis.

59
00:04:35,420 --> 00:04:42,590
The next video, let's work on our projects and see how we can play around the other properties like

60
00:04:42,590 --> 00:04:45,290
this for content and then the align items.