CSS flex-shrink

The CSS flex-shrink property is used to shrink flex items relatively, in same flex container. For example:

HTML with CSS Code
<!DOCTYPE html>
      .container{width: 380px; display: flex; background-color: brown;}
      .container > div{flex-basis: 120px; padding: 12px; border: 1px solid coral; color: wheat;}
      #secondiv{flex-shrink: 4;}

   <div class="container">
      <div id="secondiv">B</div>

CSS flex-shrink Syntax

The syntax of flex-shrink property in CSS, is:

flex-shrink: x;

The value of x should be any of the following:

  • number - used to shrink the flex items relatively using numbers like 1, 2, 3, 4, 5, etc. The default value is 1
  • initial - used to use the default value
  • inherit - used to use the value inherited by the parent element

CSS Online Test

« Previous Tutorial Next Tutorial »

Follow/Like Us on Facebook

Subscribe Us on YouTube