1
00:00:06,290 --> 00:00:15,880
The first child element of our flex boxes we are going to see is flex grow thanks to this property,

2
00:00:16,160 --> 00:00:24,650
we have the possibility to set the growth factor of a specific element, respect to another inside a

3
00:00:24,660 --> 00:00:26,030
parent container.

4
00:00:28,640 --> 00:00:38,930
The corresponding attributes to flex grow are simple numbers, which define, in fact, how much a flexible

5
00:00:38,930 --> 00:00:43,700
child box occupies in within a parent box.

6
00:00:45,610 --> 00:00:56,110
Obviously, in this moment, we have six child boxes inserted within our container and we have the containers

7
00:00:56,110 --> 00:01:01,710
set in storage like a content and flex wrap wrap.

8
00:01:01,870 --> 00:01:09,940
Let's not touch these settings so that we can, in fact, work correctly with the new property, having

9
00:01:09,940 --> 00:01:12,580
one disposition every roll.

10
00:01:13,240 --> 00:01:18,820
Let's delete all the width and let's replace them with the flex grow.

11
00:01:21,210 --> 00:01:33,840
Let's insert in SB one the six value after that, let's copy and paste Fleck's growth also inside the

12
00:01:33,870 --> 00:01:35,460
other as PS.

13
00:01:36,480 --> 00:01:43,520
Let's set random values from six to one in search of only ones we have already.

14
00:01:43,680 --> 00:01:47,040
Thirty six, let's insert four here.

15
00:01:47,100 --> 00:01:47,910
Three.

16
00:01:48,240 --> 00:01:49,110
One.

17
00:01:51,160 --> 00:01:54,100
To and in here, five.

18
00:01:57,690 --> 00:02:00,810
Now, let's save and refresh.

19
00:02:02,180 --> 00:02:09,590
As you can see, the division of the spaces was performed according to what we have inserted, inflects,

20
00:02:09,590 --> 00:02:10,090
grow.

21
00:02:10,400 --> 00:02:19,520
If we expand completely, we noticed that space one would be the widest and space for the narrowest.

22
00:02:20,990 --> 00:02:27,290
Where obviously space for corresponds to one and space one corresponds to six.

23
00:02:28,460 --> 00:02:36,680
As a consequence, we see that with the first child property we have inserted, we were able to entirely

24
00:02:36,680 --> 00:02:38,990
replace the weight value.

25
00:02:40,200 --> 00:02:48,930
Which turns out to be useless from now onwards, as we can rely on properties able to modify the contents

26
00:02:48,930 --> 00:02:54,330
completely in a dynamic way, according to the browser resolution.

27
00:02:55,300 --> 00:03:04,390
No need to say that if you need to set a maximum width of the parent container, you can insert it straight

28
00:03:04,390 --> 00:03:07,990
away into its selecter within the stylesheet.

29
00:03:09,400 --> 00:03:18,790
Flex grow does not need either a line content or height in this specific case, because, in fact,

30
00:03:19,180 --> 00:03:29,470
if we deleted both values, leaving exclusively flex rep or meeting to work, Bairo wrapping the contents,

31
00:03:29,680 --> 00:03:31,510
one saved and refreshed.

32
00:03:31,690 --> 00:03:38,620
As you can see, we would have our spaces distributed always the same way.

33
00:03:39,900 --> 00:03:45,450
Noticed that my shrinking our browser and therefore diminishing the width.

34
00:03:46,790 --> 00:03:48,680
No boxes are wrapping.

35
00:03:50,430 --> 00:04:00,090
Because with Flex grow the system, we always adopt the wind and therefore also flex rap would be considered

36
00:04:00,090 --> 00:04:03,120
as necessary in this age of.

37
00:04:04,840 --> 00:04:07,930
We can insert flex direction.

38
00:04:09,430 --> 00:04:14,110
Roe to correctly identify the subdivision.

39
00:04:16,840 --> 00:04:25,630
Because obviously not having any value set for height or width if we inserted here, Khalil.

40
00:04:27,260 --> 00:04:36,200
The values would appear absolutely identical and therefore the Fleck's growth would not work correctly,

41
00:04:36,620 --> 00:04:43,190
so do use the setting with any type of horizontal aligning.

42
00:04:45,320 --> 00:04:49,550
As opposed to flex grow, we have flex shrink.

43
00:04:51,650 --> 00:05:00,380
This property is able to reduce the space of a container so that to adapt with the browser view.

44
00:05:01,730 --> 00:05:03,320
Differently from the previous.

45
00:05:04,340 --> 00:05:11,300
This property needs to have the wind function inserted into the classes.

46
00:05:12,390 --> 00:05:18,330
Because if pre established with values are present.

47
00:05:20,640 --> 00:05:28,860
In case of the page shrinking and therefore the device change, for instance, the width value will

48
00:05:28,860 --> 00:05:32,340
be replaced by the flex shrink prop..

49
00:05:33,340 --> 00:05:41,860
And relative attribute, in fact, if we inserted the year as a value two hundred and fifty pixels in

50
00:05:41,860 --> 00:05:43,330
all our classes.

51
00:05:47,550 --> 00:05:51,780
And if we replaced grow with shrink.

52
00:05:54,150 --> 00:05:56,520
Leaving the same attributes.

53
00:06:03,140 --> 00:06:12,440
Saving and refreshing, we would know this, that space one in this case, given the fact that the total

54
00:06:12,440 --> 00:06:21,720
width is one thousand five hundred pixels for our six classes, obtains the highest value inflects shrink.

55
00:06:21,740 --> 00:06:28,100
So the greatest shrinking and appears as the smallest of all our containers.

56
00:06:28,110 --> 00:06:32,030
In fact, Space Four turns out to be the widest.

57
00:06:32,480 --> 00:06:37,100
You see that if I expand completely the browser screen.

58
00:06:38,130 --> 00:06:47,250
All the boxes will appear two hundred and fifty cents, therefore the width value will be the default

59
00:06:47,250 --> 00:06:50,140
one by shrinking it will adapt.

60
00:06:50,160 --> 00:06:59,700
And so anyway, it will display on the same line all our containers, adapting them to flex shrink.

61
00:07:01,890 --> 00:07:12,570
So as is so the shrink function X the other way round of grow with the additional need of the property

62
00:07:12,840 --> 00:07:16,620
to be inserted in the various reference selectors.