definition
flex-shrinkProperties define shrinkage rules for items.
flex-shrink mainly handles the shrinkage ratio of a single element when the container space of flex is insufficient. When the width of the parent element is less than the sum of the widths of the child elements and exceeds the width of the parent element, flex-shrink will shrink according to a certain proportion: the difference between the sum of the widths of the child elements and the width of the parent element The value is assigned to each child element according to the value of the child elementflex-shrink. The original width of each child element is minus the proportional value, and the remaining value is the actual width.
flexThe element will only shrink when the sum of its default widths is greater than the container, and its shrinking size is based on the value of flex-shrink.
Note: If the element is not an element of a flexbox object, the
flex-shrinkattribute has no effect.Defaults to 1, i.e. if there is insufficient space, the item will shrink.
grammar
.item {
flex-shrink: number|initial|inherit; /* default 1 （负值对该属性无效） */
}
number: A number that specifies the amount by which the item will shrink relative to other flexible items. 默认值是 1
initial: Set this property to its default value.
inherit: Inherit this attribute from the parent element.
-
If the
flex-shrinkattribute of all items is 1, when there is insufficient space, they will all be reduced proportionally. -
If the
flex-shrinkattribute of one item is 0 and the other items are all 1, the former will not shrink when there is insufficient space.
flex-shrink is 0
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: flex;
margin: 0px auto;
width: 380px;
height: 100px;
background-color: #e6e6e6;
}
.item {
/* flex-basis属性定义了项目占据主轴空间（main size）大小。 */
flex-basis: 100px;
height: 50px;
/* flex-shrink 属性定义项目的缩小系数 */
flex-shrink: 0;
}
.container div:nth-of-type(1) {
background-color:coral;}
.container div:nth-of-type(2) {
background-color:lightblue;}
.container div:nth-of-type(3) {
background-color:khaki;}
.container div:nth-of-type(4) {
background-color:pink;}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
Page effect:
As shown above, when flex-shrink is 0, the project will not be compressed.
flex-shrink is greater than 1
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: flex;
margin: 0px auto;
width: 650px;
height: 100px;
background-color: #e6e6e6;
}
.item {
height: 50px;
}
.container div:nth-of-type(1) {
flex-basis: 50px;flex-shrink: 0;background-color:coral;}
.container div:nth-of-type(2) {
flex-basis: 100px;flex-shrink: 1;background-color:lightblue;}
.container div:nth-of-type(3) {
flex-basis: 500px;flex-shrink: 2;background-color:khaki;}
.container div:nth-of-type(4) {
flex-basis: 300px;flex-shrink: 3;background-color:pink;}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
Page effect:
The main axis length is 650px, and the overflow space of the child elements is: 50+100+500+300-650 = -300px
The first onediv is setflex-shrink: 0 so it does not shrink, then the -300px will be replaced by the remaining three elementsdiv Shrink a certain amount respectively to compensate.
Item 2 occupies 100px, Item 3 occupies 500px, Item 4 occupies 300px, each item's flex-shrink attribute value is 1, 2, 3 respectively, then the total weight is 100px * 1 + 500px * 2 + 300px * 3 = 2000px, so the weight of each item is:
- Item 2: (100px * 1) / 2000px = 0.05;
- Item 3: (500px * 2) / 2000px = 0.5;
- Item 4: (300px * 3) / 2000px = 0.45;
Next, calculate the reduced space for each item:
- Item 2: 300px * 0.05 = 15px;
- Item 3: 300px * 0.50 = 150px;
- Item 4: 300px * 0.45 = 135px;
flex-shrink is less than 1
When the value of flex-shrink is a decimal, there are two situations:
1) The sum of the attribute values of all flex items is greater than 1, and is still calculated according to the above method; 2) The sum of the attribute values of all items is less than 1, and only a part of the overflow space is shrunk. flex-shrinkflexflex-shrink
Example:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.container {
display: flex;
margin: 0px auto;
width: 650px;
height: 100px;
background-color: #e6e6e6;
}
.item {
height: 50px;
}
.container div:nth-of-type(1) {
flex-basis: 50px;flex-shrink: 0;background-color:coral;}
.container div:nth-of-type(2) {
flex-basis: 100px;flex-shrink: 0.1;background-color:lightblue;}
.container div:nth-of-type(3) {
flex-basis: 500px;flex-shrink: 0.2;background-color:khaki;}
.container div:nth-of-type(4) {
flex-basis: 300px;flex-shrink: 0.3;background-color:pink;}
</style>
</head>
<body>
<div class="container">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div class="item">4</div>
</div>
</body>
</html>
The sum of the attribute values of allflex itemsflex-shrink is less than 1, and only a part of the overflow space is shrunk. Item 2 is 0.1, and item 3 is 0.2. Item 4 is 0.3, the total shrinkage space is: 300px * (0.1 + 0.3 + 0.2) = 180px
The weight calculation method of each item is unchanged, and each item is reduced separately:
- Item 2: 180px * 0.05 = 9px;
- Item 3: 180px * 0.50 = 90px;
- Item 4: 180px * 0.45 = 81px;
Page effect:
