1
00:00:00,490 --> 00:00:06,190
Next up, we're going to learn about flex grow and flex shrink, so with your container, this defines

2
00:00:06,190 --> 00:00:09,290
the ability for flex items to grow.

3
00:00:09,310 --> 00:00:15,040
If necessary, it accepts a unit less value that serves as a proportion.

4
00:00:15,160 --> 00:00:21,520
It dictates what amount of a available space inside the flex container the item should take up.

5
00:00:22,480 --> 00:00:28,200
On the other hand, flex shrink will define the ability for flex items to shrink if necessary.

6
00:00:28,750 --> 00:00:32,560
Let's try this out, so let's go after order.

7
00:00:33,100 --> 00:00:36,730
But we still need to actually just going to.

8
00:00:37,820 --> 00:00:42,920
Take this carpet action to it from here.

9
00:00:43,920 --> 00:00:49,710
Yeah, let's take this let's order, let's copy the cut, so let's come up with this and I'm going to

10
00:00:49,710 --> 00:00:54,570
select the first child and I'm going to actually comment about.

11
00:00:55,370 --> 00:01:02,870
The entire thing that we did here with order, so let's reset our order to as it was, and we still

12
00:01:02,870 --> 00:01:05,720
have this one in it, so let's delete the order.

13
00:01:06,080 --> 00:01:06,800
And there we go.

14
00:01:06,810 --> 00:01:08,240
We have items now.

15
00:01:08,250 --> 00:01:11,210
The default value of flex grow is zero.

16
00:01:11,240 --> 00:01:16,970
So flags grow and zero is the default value.

17
00:01:17,210 --> 00:01:20,660
Now, let me also give them a flex rep of rep.

18
00:01:21,470 --> 00:01:26,270
Actually, I should do this through the containers so we don't need to do this here, but we need to

19
00:01:26,270 --> 00:01:28,490
go up to the children.

20
00:01:28,970 --> 00:01:34,540
Children may container where we display this flags and thus stall them as a rep.

21
00:01:34,790 --> 00:01:39,040
OK, now let's go back here and we selected the first child.

22
00:01:39,050 --> 00:01:47,660
OK, so within the idea of children, the class of Lexington and our second class of flex item, and

23
00:01:47,660 --> 00:01:49,670
we're the first of this one right here.

24
00:01:51,080 --> 00:01:58,180
Now, let's go with the value of two, as you can see now, its increasing its space and its do a value

25
00:01:58,190 --> 00:02:02,570
for action, need to push it eventually here.

26
00:02:03,380 --> 00:02:07,730
So when there are free items available, you can see it's shrinking down.

27
00:02:09,410 --> 00:02:14,720
If there are only two items available, it will still remain with the four, so if I would decrease

28
00:02:14,720 --> 00:02:15,560
this to two.

29
00:02:16,630 --> 00:02:24,790
And I see, yeah, it's not taking effect because it's only fractionally taking up two times its maximum

30
00:02:24,790 --> 00:02:25,220
space.

31
00:02:25,510 --> 00:02:30,550
Now, I'm going to take this composite again.

32
00:02:30,550 --> 00:02:33,190
I'm going to select the last child, which is number six.

33
00:02:33,850 --> 00:02:35,150
And let's do for this.

34
00:02:35,530 --> 00:02:40,420
We could also reflects growing kids taking up that space, but less to.

35
00:02:41,580 --> 00:02:44,730
A flex Trink.

36
00:02:47,430 --> 00:02:54,330
And now let's just type in one, this is its default value, but if I were type in now free.

37
00:02:55,480 --> 00:03:02,370
And if he pushed us together a bit, action need to increase naoum the maximum width of the elements.

38
00:03:02,740 --> 00:03:11,540
So let me kopit this one because the items themselves, they are without value until now.

39
00:03:11,560 --> 00:03:14,500
So they don't have a maximum value or a minimum value.

40
00:03:14,950 --> 00:03:25,060
But we could do oops, we could do something like width and we can assign them a width of 150 pixels.

41
00:03:26,610 --> 00:03:30,870
OK, now, if I want to shrink this town on a.

42
00:03:32,360 --> 00:03:39,450
I need to do a bigger value, let's say 300, let me come in this one back and this one completely out.

43
00:03:39,930 --> 00:03:43,380
OK, so that's basically it for flex grow and shrink.