Loading…
Everything will be ready in few seconds
- Theory
- Theory
- Comments
The item shrinkage factor, flex-shrink
If the value of the basic sizes of flex items is greater than the overall dimensions of the flex container, then you will get negative space.
We can use a redistribution mechanism not just for free space, but also for negative space. Flex items are able to redistribute negative space between themselves and to shrink themselves.
The flex-shrink property is used to shrink flex items. It can be referred to as the “shrinkage ratio.”
The flex-shrink property accepts non-negative integer values, and its default value is 1.
If the flex-shrink value is greater than zero, then the flex item will shrink in size in order to absorb part of the negative space, if any exists.
If the flex-shrink value is equal to zero, the flex item will not shrink in size.
Flex elements try to behave as flexibly as possible without overflowing the bounds of their container, so the default value of flex-shrink is 1. But if you assign zero values for the shrinkage ratio, then you will be able to overflow items.
- index.html
- style.css
Thanks! We’ll fix everything at once!
The code has changed, click “Refresh” or turn autorun on.
You’ve gone to a different page
Click inside the mini-browser to shift the focus onto this window.
- Assign
300pxas the basic size of flex items to the skateboards in the first.spot-1 .skateclearing. - Add a skateboard with a Blue Raccoon to the second clearing.
- Then assign a shrinkage factor of zero to the Brown Raccoon’s skateboard (
.racoon-brown) - as well as to all of the other skateboards in the second clearing.
Comments