1
00:00:09,730 --> 00:00:10,990
Welcome back.

2
00:00:11,020 --> 00:00:18,670
In this video, let's talk about some of the properties that we can use on the children or the items.

3
00:00:18,760 --> 00:00:26,590
Now we are done with the parents properties and you can explore more to expand your horizon.

4
00:00:26,620 --> 00:00:30,330
The first property is what we call flex.

5
00:00:30,340 --> 00:00:32,080
So what does it mean?

6
00:00:32,229 --> 00:00:42,070
Well, let's say that I want a particular child or items to be bigger than the rest of the item, and

7
00:00:42,070 --> 00:00:46,070
I use that concept to achieve the layout.

8
00:00:46,090 --> 00:00:53,110
You can see that we have two columns here, one being bigger than the other.

9
00:00:53,110 --> 00:00:57,040
So I use flex property to achieve this.

10
00:00:57,040 --> 00:00:58,460
So let's see.

11
00:00:58,480 --> 00:01:05,140
So let's say that I want the A to be bigger than the rest of the items.

12
00:01:05,140 --> 00:01:10,930
And because they are enough space, they are going to share the available space.

13
00:01:10,930 --> 00:01:15,400
So let's see if I add flex of one.

14
00:01:15,430 --> 00:01:25,870
You can see that now the AY has taken all the available space to it and that's what we see on the screen.

15
00:01:25,990 --> 00:01:35,650
So if you provide flex one to each of them, it means that you need to divide the available space equally.

16
00:01:35,650 --> 00:01:39,760
So before I add to child number three, let's save it.

17
00:01:39,790 --> 00:01:44,350
You can see that for child one to the half.

18
00:01:44,350 --> 00:01:44,950
What, one?

19
00:01:44,950 --> 00:01:45,400
One.

20
00:01:45,400 --> 00:01:47,950
And then this one has no flex.

21
00:01:47,950 --> 00:01:54,550
So this simply means that they are going to share the available space in percentages.

22
00:01:54,640 --> 00:01:59,020
So when we say one, it means that it is taking 100%.

23
00:01:59,140 --> 00:02:04,450
But if we distribute one one, it means that they are going to share it equally.

24
00:02:04,450 --> 00:02:14,950
So if I add flex one to the next child, you can see that now they have shared the available space equally

25
00:02:14,950 --> 00:02:15,940
or evenly.

26
00:02:16,120 --> 00:02:25,420
And if I increase the child to what is the magenta color to three, so the available space is equal

27
00:02:25,420 --> 00:02:26,710
to 100%.

28
00:02:26,710 --> 00:02:35,320
So if the first child has taken two, it means that this child has taken 50% and the rest will be shared

29
00:02:35,320 --> 00:02:37,780
among the remaining children.

30
00:02:37,780 --> 00:02:47,830
So if we save this one and let's see, you can see that this one has taken 50% and this one, 25% and

31
00:02:47,830 --> 00:02:49,480
then 25%.

32
00:02:49,480 --> 00:02:53,030
So this is what you call the flex property.

33
00:02:53,050 --> 00:02:57,340
The next video, let's talk about another property core order.