Flex represents a univocal property which is able to contain in its inside values, which so far we
have seen as inserted in flex, grow, flex, shrink and flex basis.
Therefore, with just one property, we have the possibility to operate correctly with all the three
elements just mentioned.
Let's start by deleting all the flex bases and then keeping only flags as a value.
Saving and refreshing in comparison with what we have just seen, nothing changes because flex, when
containing only one value beat, percentage pixel or other units of measure, we always and anyway represent
the equivalent flex basis value.
The complete syntax of Fleck's expects Fleck's grow to be the first value, which by default starts
from zero as second value flex shrink, which starts from one.
So if we inserted this syntax in all our flags.
With the last 50 percent saving and refreshing, the result wouldn't change things.
In any case, both shrink and grow have the same value.
As a consequence, only the final percentage value matters.
If we wanted to insert only Aflex grow value, then we would be suppose to delete completely what both
shrink and Baz's are made of.
So here we might insert, for example, six.
Here, five.
For.
Three.
To.
And one saving and refreshing, we see the flex grow equivalent.
Lower value, one higher value.
Six space, one is the smallest and space six is the largest.
If instead we wanted to use flex shrink.
We should add a weather related property value.
That means a value which may specify The Selecter weights, and as we have already seen at the beginning
of the lesson, we might inserted directly in line without adding that additional property so that such
a width may appear on screen where possible.
And instead, if the browser cannot display completely all of the selectors with the specified width,
the value entered in shrink will come into play.
To do this, we must insert a zero at the beginning of our flex, which represents a flex grow, which
you can insert anywhere without giving references.
So it will start off with using the second value.
That is flex shrink and then the value that we would have entered in the way the would be inserted after
our number relative to shrink.
Then we insert two hundred pixels.
Two hundred.
And two hundred, let's say, and refresh, as you can see in this case, even the shrink is the reference.
The highest value that is six will appear as the smallest and the value one that is the relative value
to Espie, one as the largest, obviously stretching out.
As you can see, all our containers will have the same width.
Two hundred pixels and shrink will come into play once we are making our content narrower, then within
the flex property you will have the possibility to enter a single numeric value without any type of
unit of measurement corresponding to flex grow or a single unit of measurement value or percentage whatever,
which will correspond to flex bases or else with the syntax.
Also insert flex shrink or with a single property.
So if it will be more convenient for you to use a single property and then choose which of the three
will actually appear on the screen, then you can use flex.
Otherwise, you'd better continue with the properties we have seen in the previous two lessons.