flex

最新推荐文章于 2022-11-26 20:18:18 发布

欧气的猫七姑娘

最新推荐文章于 2022-11-26 20:18:18 发布

阅读量103

点赞数

分类专栏： css 文章标签： css

本文链接：https://blog.csdn.net/weixin_44063886/article/details/105513374

版权

css 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

关于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值相同时才能用！！！！

欧气的猫七姑娘

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
flex

关于flex-shrinkflex-shrink 压缩因子控制items项目如何减小宽度或者高度，当所有项的宽度大于父元素宽度时才有用，如果所有子项的宽度之和小于父元素宽度，即使给flex-shrink设置了数据也会无效。默认值：1 (超出自动压缩)如果某一项设置flex-shrink:0，则此项不压缩。计算权重方式：如果父元素内部有三个子元素，宽度为w1,...
复制链接

扫一扫