Flexbox - flex-shrink - Learn coding, chatgpt Tutorials

The second property applied to flex box items is called "flex-shrink" and stores a non-negative integer value. This value represents a shrinkage factor for the item.

When there is no more room to spread out in the Flexbox the items start to shrink to fit into the container.

The default value stored in the flex-shrink property is 1, this means that when we start to reduce the width of the container, the items shrink proportionally.

If we want one or more items not to shrink, we must assign the "flex-shrink" property the value zero.

Let's try assigning the value 0 to the second item:

Problem: Define a Flexbox with three items. Make the second item unshrinkable using the "flex-shrink" property.

page1.html

<!DOCTYPE html>
<html>
<head>
  <title>Problem</title>
  <meta charset="UTF-8">
  <link rel="StyleSheet" href="styles.css" type="text/css">
</head>
<body>
  <div id="container1">
    <div id="item1">Box 1<br>This is a test of the flex-shrink property</div>
    <div id="item2">Box 2<br>This is a test of the flex-shrink property</div>
    <div id="item3">Box 3<br>This is a test of the flex-shrink property</div>
  </div>
</body>
</html>

styles.css

#container1{
  display: flex;
  background-color: #000;  
  height: 300px;
  color:white;
  font-size:2rem;
}

#item1 {  
  background-color: #0078A6;
}
#item2 {
  flex-shrink: 0;
  background-color: #0084B6;
}
#item3 {
  background-color: #008CC1;
}

Only the #item2 element is assigned a value of 0 to the flex-shrink property, the others store a value of 1 and therefore can be shrunk:

flex-shrink: 0;

Robort Gabriel

Lagos, Nigeria

Skills