CSS flex-shrink

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

HTML with CSS Code
<!DOCTYPE html>
<html>
<head>
   <style>
      .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;}
   </style>
</head>
<body>

   <div class="container">
      <div>A</div>
      <div id="secondiv">B</div>
      <div>C</div>
      <div>D</div>
   </div>
   
</body>
</html>
Output
A
B
C
D

In the above example, here is a list of brief descriptions of CSS code:

The HTML structure consists of a div with a class of "container" containing four child divs. The CSS code targets the container div and sets it to use a flexbox layout with a width of 380 pixels and a background color of brown. The CSS also targets each child div and sets its initial width to 120 pixels, adds 12 pixels of padding, a 1-pixel solid coral-colored border, and sets the text color to wheat. Finally, the CSS targets the second child div using its ID selector and sets its ability to shrink to 4 times that of the other children.

This results in a flexbox layout where each child div is evenly spaced and has the same initial width of 120 pixels, except for the second child div, which is set to shrink more than the other children. The brown background color and coral-colored borders add visual interest to the layout, and the wheat-colored text provides contrast against the dark background.

CSS flex-shrink syntax

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

flex-shrink: x;

The value of x should be any of the following:

CSS Online Test


« Previous Tutorial Next Tutorial »


Liked this post? Share it!