If the value of 2 is applied to both center boxes- one at top , and one at bottom- why wouldnt both of these boxes shrinked with the same size? I am confused! @mtf please help.
The flex-shrink value specifies the factor/proportion by which an item should shrink. The flex-shrink value is not an absolute number but is a relative factor. In other words, the flex-shrink values of the sibling items will impact on what actually happens.
You are correct that both the .top.center and .middle.center have flex-shrink values of 1 (default). But you must look at the flex-shrink values of the sibling items as well to understand what will actually happen.
The .top.side items have been given a flex-shrink value of 2. The flex-shrink value of the .top.center item is 1. If there is need for the items to shrink, then you can think of it as chopping the shrinkage up into 5 equal parts. The left side item will shrink by 2 parts, the center item will shrink by 1 part and the right side item will shrink by 2 parts. So whatever shrinkage was necessary, 40% of the shrinkage will be absorbed by the left item, 20% by the center item and 40% by the right item.
The .middle.side items have been given a flex-shrink value of 0. The flex-shrink value of the .middle.center item is 1. If there is need for the items to shrink, then all the shrinking (100% of shrinkage) will have to be absorbed by the center item.
Even though both the center items have a flex-shrink value of 1, the flex-shrink values of the siblings are different. Because of the flex-shrink values of the siblings, the .top.center item only absorbs 20% of the shrinkage necessary. By contrast, the .middle.center item has to absorb 100% of the shrinkage necessary.
While making the exercise from Instructions section nothing changed in the view screen on the right. I added the values requested for flex-shink and nothing happend. Has anyone encounter this?