CSS Flexbox - flex-shrink Property
CSS flex-shrink property specifies the flex shrink factor of a flex item. When the combined size of flex items is larger than the size of the flex container, the items will shrink proportionally based on their flex-shrink values.
The flex-shrink is commonly used with flex-grow and flex-basis, and usually defined using the flex shorthand.
Possible Values
-
<number> − Any valid positive number. Negative values are not valid.
Applies to
Flex items, including in-flow pseudo-elements.
Syntax
flex-shrink: <number>;
CSS flex-shrink - <number>
The following example demonstrates that flex-shrink: 2 property shrinks the flex items twice as compared to other flex items when there is not enough space in the flex container −
<html> <head> <style> .flex-container { display: flex; background-color: green; width: 500px; } .flex-container div { background-color: yellow; padding: 5px; margin: 5px; height: 50px; flex-basis: 100px; } .flex-item { flex-shrink: 2; } </style> </head> <body> <div class="flex-container"> <div>Flex item 1</div> <div>Flex item 2</div> <div class="flex-item">Flex item 3</div> <div class="flex-item">Flex item 4</div> <div>Flex item 5</div> <div>Flex item 6</div> </div> </body> </html>
Advertisements
To Continue Learning Please Login
Login with Google