1
00:00:05,500 --> 00:00:14,950
Flex represents a univocal property which is able to contain in its inside values, which so far we

2
00:00:14,950 --> 00:00:22,090
have seen as inserted in flex, grow, flex, shrink and flex basis.

3
00:00:23,250 --> 00:00:30,690
Therefore, with just one property, we have the possibility to operate correctly with all the three

4
00:00:30,690 --> 00:00:32,970
elements just mentioned.

5
00:00:34,240 --> 00:00:41,830
Let's start by deleting all the flex bases and then keeping only flags as a value.

6
00:00:51,890 --> 00:01:00,680
Saving and refreshing in comparison with what we have just seen, nothing changes because flex, when

7
00:01:00,680 --> 00:01:09,920
containing only one value beat, percentage pixel or other units of measure, we always and anyway represent

8
00:01:09,920 --> 00:01:12,410
the equivalent flex basis value.

9
00:01:13,470 --> 00:01:22,500
The complete syntax of Fleck's expects Fleck's grow to be the first value, which by default starts

10
00:01:22,500 --> 00:01:27,880
from zero as second value flex shrink, which starts from one.

11
00:01:28,350 --> 00:01:35,400
So if we inserted this syntax in all our flags.

12
00:01:37,800 --> 00:01:45,540
With the last 50 percent saving and refreshing, the result wouldn't change things.

13
00:01:45,540 --> 00:01:50,400
In any case, both shrink and grow have the same value.

14
00:01:51,620 --> 00:01:56,300
As a consequence, only the final percentage value matters.

15
00:01:57,800 --> 00:02:06,830
If we wanted to insert only Aflex grow value, then we would be suppose to delete completely what both

16
00:02:06,830 --> 00:02:09,200
shrink and Baz's are made of.

17
00:02:09,410 --> 00:02:13,250
So here we might insert, for example, six.

18
00:02:14,450 --> 00:02:15,890
Here, five.

19
00:02:17,380 --> 00:02:18,160
For.

20
00:02:19,310 --> 00:02:20,150
Three.

21
00:02:22,240 --> 00:02:22,870
To.

22
00:02:24,170 --> 00:02:30,650
And one saving and refreshing, we see the flex grow equivalent.

23
00:02:32,500 --> 00:02:35,320
Lower value, one higher value.

24
00:02:35,350 --> 00:02:41,800
Six space, one is the smallest and space six is the largest.

25
00:02:44,360 --> 00:02:47,750
If instead we wanted to use flex shrink.

26
00:02:49,120 --> 00:02:53,290
We should add a weather related property value.

27
00:02:55,100 --> 00:03:02,900
That means a value which may specify The Selecter weights, and as we have already seen at the beginning

28
00:03:02,900 --> 00:03:11,360
of the lesson, we might inserted directly in line without adding that additional property so that such

29
00:03:11,360 --> 00:03:14,840
a width may appear on screen where possible.

30
00:03:15,230 --> 00:03:25,940
And instead, if the browser cannot display completely all of the selectors with the specified width,

31
00:03:26,120 --> 00:03:30,480
the value entered in shrink will come into play.

32
00:03:30,770 --> 00:03:39,560
To do this, we must insert a zero at the beginning of our flex, which represents a flex grow, which

33
00:03:40,310 --> 00:03:44,050
you can insert anywhere without giving references.

34
00:03:44,480 --> 00:03:48,740
So it will start off with using the second value.

35
00:03:50,280 --> 00:03:59,430
That is flex shrink and then the value that we would have entered in the way the would be inserted after

36
00:03:59,430 --> 00:04:01,780
our number relative to shrink.

37
00:04:02,340 --> 00:04:05,520
Then we insert two hundred pixels.

38
00:04:05,850 --> 00:04:06,790
Two hundred.

39
00:04:07,170 --> 00:04:08,070
Two hundred.

40
00:04:08,400 --> 00:04:09,240
Two hundred.

41
00:04:12,050 --> 00:04:22,250
And two hundred, let's say, and refresh, as you can see in this case, even the shrink is the reference.

42
00:04:22,610 --> 00:04:32,600
The highest value that is six will appear as the smallest and the value one that is the relative value

43
00:04:32,600 --> 00:04:39,170
to Espie, one as the largest, obviously stretching out.

44
00:04:39,170 --> 00:04:44,660
As you can see, all our containers will have the same width.

45
00:04:45,910 --> 00:04:55,600
Two hundred pixels and shrink will come into play once we are making our content narrower, then within

46
00:04:55,600 --> 00:05:03,520
the flex property you will have the possibility to enter a single numeric value without any type of

47
00:05:03,520 --> 00:05:12,070
unit of measurement corresponding to flex grow or a single unit of measurement value or percentage whatever,

48
00:05:12,070 --> 00:05:17,020
which will correspond to flex bases or else with the syntax.

49
00:05:17,020 --> 00:05:22,110
Also insert flex shrink or with a single property.

50
00:05:22,600 --> 00:05:31,090
So if it will be more convenient for you to use a single property and then choose which of the three

51
00:05:31,510 --> 00:05:36,410
will actually appear on the screen, then you can use flex.

52
00:05:36,610 --> 00:05:43,750
Otherwise, you'd better continue with the properties we have seen in the previous two lessons.