关于flex-shrink
-
flex-shrink 压缩因子
-
控制items项目如何减小宽度或者高度,当所有项的宽度大于父元素宽度时才有用,如果所有子项的宽度之和小于父元素宽度,即使给flex-shrink设置了数据也会无效。
-
默认值:1 (超出自动压缩)
-
如果某一项设置flex-shrink:0,则此项不压缩。
-
计算权重方式:
如果父元素内部有三个子元素,宽度为w1, w2,w3,而且flex-shrink的值为1:2:3,
则先计算总压缩sum = w1+w2X2+w3X3;
则元素的压缩比为w1/sum,w2X2/sum,w3X3/sum;
压缩的宽度为,溢出空间与压缩比的乘积
第一种情况:若元素flex-shrink值为0,则即使父元素宽度不够,元素也不进行压缩。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ width:200px; height:200px; display: flex; align-items: stretch; } .left{ flex:0 0 120px; background-color: bisque; } .right{ flex:0 0 120px; background-color: #ccc; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
第二种情况:验证默认值,给flex只写一个固定宽度,且元素和大于父元素宽度。结果表明,元素宽度受到压缩,所以,flex-shrink的默认值为1,默认如果有溢出空间,则自动压缩。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ width:200px; height:200px; display: flex; align-items: stretch; } .left{ flex:120px; background-color: bisque; } .right{ flex:120px; background-color: #ccc; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
第三种:最普通的情况,且所有元素的flex-basis的值不相同
先计算总压缩
溢出空间
left压缩宽度计算
right压缩宽度计算
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ width:200px; height:200px; display: flex; align-items: stretch; } .left{ flex:0 3 150px; background-color: bisque; } .right{ flex:0 2 120px; background-color: #ccc; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
第四种:若所有元素的flex-basis值相同,可简化计算步骤
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .container{ width:200px; height:200px; display: flex; align-items: stretch; } .left{ flex:0 3 120px; background-color: bisque; } .right{ flex:0 2 120px; background-color: #ccc; } </style> </head> <body> <div class="container"> <div class="left"></div> <div class="right"></div> </div> </body> </html>
此种情况下,可直接计算left压缩宽度 40X3/5=24px;
right压缩宽度 40X2/5=16px;
有些博主写的计算方式可能是此种,注意flex-basis值相同时才能用!!!!
-