CSS Flex-shrink property
This property defines how the flex item will shrink relative to the other items inside the flex container.
Syntax
flex-shrink: number | initial | inherit
Property Values:
number: A positive number determines the flex-shrink factor of the flex item. The default value is 1. Negative numbers are invalid.
initial: Its default value.
inherit: Its parent element.
Example:
<!DOCTYPE html> <html> <head> <style> .container { width: 400px; height: 100px; border: 5px solid #cc00cc; display: flex; background-color: #cc3300; margin: 30px; } .flex-item{ background-color: pink; font-size: 25px; margin: 5px; flex-grow: 1; flex-shrink: 1; flex-basis: 100px; } </style> </head> <body> <h1> Example of the flex-shrink property </h1> <div class="container"> <div class = "flex-item"></div> <div class = "flex-item"></div> <div class = "flex-item" style = "flex-shrink: 5;"> 5 </div> <div class = "flex-item" style = "flex-shrink: initial;"> initial </div> <div class = "flex-item" style = "flex-shrink: inherit;"> inherit </div> </div> <div class="container"> <div class = "flex-item"></div> <div class = "flex-item" style = "flex-shrink: 8;"> 8 </div> <div class = "flex-item" style = "flex-shrink: 10;"> 10 </div> <div class = "flex-item" style = "flex-shrink: 6;"> 6 </div> <div class = "flex-item"></div> </div> </body> </html>
OUTPUT: