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

2
00:00:09,740 --> 00:00:18,930
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
two.

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

5
00:00:27,920 --> 00:00:29,150
Okay, so let's see.

6
00:00:29,180 --> 00:00:37,550
You can see that for Flexbox, it lies on two concepts container and then the item, as we have discussed

7
00:00:37,550 --> 00:00:38,210
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,680
So for the container, let's add an item.

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

11
00:00:52,940 --> 00:00:58,320
And for the parent container we have these properties as we discussed.

12
00:00:58,340 --> 00:01:06,700
Flex direction, flex wrap just 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,520
So now let's see.

15
00:01:13,700 --> 00:01:15,740
So when, let's say the main axes.

16
00:01:15,770 --> 00:01:17,090
Now have a look.

17
00:01:17,240 --> 00:01:26,190
When I add additional item, do you see the movement is from way 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:34,720
If I add one more.

20
00:01:34,760 --> 00:01:36,440
Have a look at the movement.

21
00:01:36,470 --> 00:01:38,240
Here we go.

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

23
00:01:41,330 --> 00:01:43,490
Well, there is no space.

24
00:01:43,490 --> 00:01:44,170
To what?

25
00:01:44,180 --> 00:01:46,580
To content the other element.

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

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

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

29
00:02:03,560 --> 00:02:08,330
So by default it is set to no wrap when I change to wrap.

30
00:02:08,360 --> 00:02:10,729
You can see that now they are back.

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

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

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

34
00:02:30,650 --> 00:02:32,030
It's from top here.

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

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

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

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

39
00:02:47,750 --> 00:02:53,190
For the meantime, let's explore the main axis and then cross axis.

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

41
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

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

43
00:03:07,580 --> 00:03:08,630
Now have a look.

44
00:03:08,630 --> 00:03:11,410
When I add, you see where is starting from?

45
00:03:11,420 --> 00:03:15,940
Starting from way top right corner here to left.

46
00:03:15,950 --> 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

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

48
00:03:30,980 --> 00:03:37,130
So let's remove this once and let's start with the column and see the movement.

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

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

51
00:03:42,890 --> 00:03:50,090
You can see that this is what in column if I add more, you see that the movement is from where left

52
00:03:50,090 --> 00:03:52,330
to corner here to bottom.

53
00:03:52,340 --> 00:03:55,400
That is the movement of the column.

54
00:03:55,400 --> 00:04:03,020
So the main and this is from where from top to bottom in this order and I can add more and you see that

55
00:04:03,020 --> 00:04:07,410
because it is wrap now it is moving to the next line.

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

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

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

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

60
00:04:25,700 --> 00:04:29,000
The main axis is somewhere from bottom here to top.

61
00:04:29,150 --> 00:04:30,070
That is it.

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

63
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

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