The first child element of our flex boxes we are going to see is flex grow thanks to this property,
we have the possibility to set the growth factor of a specific element, respect to another inside a
parent container.
The corresponding attributes to flex grow are simple numbers, which define, in fact, how much a flexible
child box occupies in within a parent box.
Obviously, in this moment, we have six child boxes inserted within our container and we have the containers
set in storage like a content and flex wrap wrap.
Let's not touch these settings so that we can, in fact, work correctly with the new property, having
one disposition every roll.
Let's delete all the width and let's replace them with the flex grow.
Let's insert in SB one the six value after that, let's copy and paste Fleck's growth also inside the
other as PS.
Let's set random values from six to one in search of only ones we have already.
Thirty six, let's insert four here.
Three.
One.
To and in here, five.
Now, let's save and refresh.
As you can see, the division of the spaces was performed according to what we have inserted, inflects,
grow.
If we expand completely, we noticed that space one would be the widest and space for the narrowest.
Where obviously space for corresponds to one and space one corresponds to six.
As a consequence, we see that with the first child property we have inserted, we were able to entirely
replace the weight value.
Which turns out to be useless from now onwards, as we can rely on properties able to modify the contents
completely in a dynamic way, according to the browser resolution.
No need to say that if you need to set a maximum width of the parent container, you can insert it straight
away into its selecter within the stylesheet.
Flex grow does not need either a line content or height in this specific case, because, in fact,
if we deleted both values, leaving exclusively flex rep or meeting to work, Bairo wrapping the contents,
one saved and refreshed.
As you can see, we would have our spaces distributed always the same way.
Noticed that my shrinking our browser and therefore diminishing the width.
No boxes are wrapping.
Because with Flex grow the system, we always adopt the wind and therefore also flex rap would be considered
as necessary in this age of.
We can insert flex direction.
Roe to correctly identify the subdivision.
Because obviously not having any value set for height or width if we inserted here, Khalil.
The values would appear absolutely identical and therefore the Fleck's growth would not work correctly,
so do use the setting with any type of horizontal aligning.
As opposed to flex grow, we have flex shrink.
This property is able to reduce the space of a container so that to adapt with the browser view.
Differently from the previous.
This property needs to have the wind function inserted into the classes.
Because if pre established with values are present.
In case of the page shrinking and therefore the device change, for instance, the width value will
be replaced by the flex shrink prop..
And relative attribute, in fact, if we inserted the year as a value two hundred and fifty pixels in
all our classes.
And if we replaced grow with shrink.
Leaving the same attributes.
Saving and refreshing, we would know this, that space one in this case, given the fact that the total
width is one thousand five hundred pixels for our six classes, obtains the highest value inflects shrink.
So the greatest shrinking and appears as the smallest of all our containers.
In fact, Space Four turns out to be the widest.
You see that if I expand completely the browser screen.
All the boxes will appear two hundred and fifty cents, therefore the width value will be the default
one by shrinking it will adapt.
And so anyway, it will display on the same line all our containers, adapting them to flex shrink.
So as is so the shrink function X the other way round of grow with the additional need of the property
to be inserted in the various reference selectors.