1
00:00:08,420 --> 00:00:09,530
In this video.

2
00:00:09,530 --> 00:00:18,920
Let's use this tool to summarize everything that we have talked about under Flexbox so you can see that

3
00:00:18,920 --> 00:00:28,010
for flex container these are the properties direction drop just file contains align self and align contents.

4
00:00:28,010 --> 00:00:31,670
I didn't talk about align content, but you can exploit it at the free time.

5
00:00:31,670 --> 00:00:34,070
So these are the common use ones.

6
00:00:34,070 --> 00:00:37,430
So to get started, let's add an item.

7
00:00:37,460 --> 00:00:40,430
Remember the flex direction is row.

8
00:00:40,430 --> 00:00:43,400
So this is our flex container.

9
00:00:43,430 --> 00:00:46,220
So let's add one item and let's see.

10
00:00:46,220 --> 00:00:50,690
Now you can see that the main axis is from left to right.

11
00:00:50,690 --> 00:00:56,620
You can see that the main axis is from left to right because that is where it is moving towards.

12
00:00:56,620 --> 00:00:57,440
So now let's see.

13
00:00:57,440 --> 00:01:06,260
Now this is my items and if there is no space, then I can use what is called flex wrap to move it on

14
00:01:06,260 --> 00:01:07,910
a new line as that.

15
00:01:08,030 --> 00:01:16,220
And for this one, we can control the position of the individual item because there's enough space here.

16
00:01:16,250 --> 00:01:21,020
So to achieve that, we are going to use what is called justified content.

17
00:01:21,030 --> 00:01:27,230
So like I said, this property control the element on the main axis.

18
00:01:27,230 --> 00:01:34,670
So when I change this one to center, you can see that it is at the center of the page on the main axis

19
00:01:34,670 --> 00:01:44,720
and if I change it to flex end and start and between and around as I've shown you.

20
00:01:44,720 --> 00:01:48,650
So this is what we call the main axis.

21
00:01:48,650 --> 00:01:55,100
But if I change the direction to row reverse now the order changes.

22
00:01:55,100 --> 00:01:59,870
And if I change the Java content again, they are all on what?

23
00:01:59,870 --> 00:02:01,460
On the main axis.

24
00:02:01,460 --> 00:02:05,360
So that's why we see the effects on the main axis.

25
00:02:05,360 --> 00:02:07,460
So what about the column?

26
00:02:07,580 --> 00:02:13,700
If I change this one to column now, let me remove it and let's start adding up the item.

27
00:02:13,850 --> 00:02:22,580
So when I add additional item on the page, you can see that it is starting at the center on the main

28
00:02:22,580 --> 00:02:29,540
axis because I said that the just file content supposed to be what's space around now if I change to

29
00:02:29,540 --> 00:02:32,340
start now, it is starting from here.

30
00:02:32,390 --> 00:02:41,150
If I change to end is at the end of the parent container and then space between and then space around.

31
00:02:41,150 --> 00:02:45,260
So let me change this one to start and let's add more items to it.

32
00:02:45,260 --> 00:02:53,720
So for this one, the main axis is from top to bottom, and then the cross axis is from left to right.

33
00:02:53,720 --> 00:03:02,390
So I can control this one using the line items, whether it's supposed to be at the center here or here

34
00:03:02,420 --> 00:03:03,740
or whatever I want.

35
00:03:03,740 --> 00:03:07,460
So let's add more items and you can see the movement.

36
00:03:09,730 --> 00:03:12,160
And let's say that we want to work.

37
00:03:12,160 --> 00:03:14,090
Let me remove all these items.

38
00:03:14,110 --> 00:03:18,180
Let's say that you want to work on the items, the flex items.

39
00:03:18,190 --> 00:03:24,430
Now, let me bring back to Raw here and then we're going to be at the start.

40
00:03:24,610 --> 00:03:25,090
Okay.

41
00:03:25,090 --> 00:03:31,720
So if I click on that, you can see that I have the properties for the items.

42
00:03:31,720 --> 00:03:34,180
So let me add more items in the mix.

43
00:03:34,180 --> 00:03:37,780
And now let's see when I click on the first one.

44
00:03:37,780 --> 00:03:44,290
Now I can control the order when I say that this one, the order is supposed to be one, you can see

45
00:03:44,290 --> 00:03:44,950
where it is.

46
00:03:44,950 --> 00:03:48,010
I can increase this one as flex grow.

47
00:03:48,040 --> 00:03:49,570
So let's grow.

48
00:03:49,600 --> 00:03:53,560
It is same as flex a shortcut for flex grow.

49
00:03:53,590 --> 00:03:55,840
When I say flex, grow the same as what?

50
00:03:55,840 --> 00:03:56,590
Flex.

51
00:03:56,590 --> 00:04:02,500
So you can see that if I give it as one, it means that it has taken the available space.

52
00:04:02,500 --> 00:04:11,140
And if I click on the second child and I see that the flex grow is supposed to be two or three, it

53
00:04:11,140 --> 00:04:14,950
can see I can change the grow also to say one.

54
00:04:14,950 --> 00:04:19,600
And for this one too, I can change the grow also.

55
00:04:19,630 --> 00:04:22,120
Now I can change the order.

56
00:04:22,120 --> 00:04:27,910
Let's say that for this one, I want it to be at the beginning or the end.

57
00:04:27,910 --> 00:04:33,940
I can use this one so we can play around with this tool to be familiar with Flex Box.