关于css3:CSS3中弹性项目的压缩规则

43次阅读

共计 1248 个字符，预计需要花费 4 分钟才能阅读完成。

默认状况下，当弹性盒空间有余时，弹性我的项目会相应压缩，当具体的压缩规定是什么呢？咱们来看一个示例

<style>
    .contain {
        width: 300px;
        height: 300px;
        background: red;
        display: flex;
    }
        
    .item1 {
        width: 200px;
        height: 200px;
        background: green;
        flex-shrink: 1
    }
        
    .item2 {
        width: 400px;
        height: 200px;
        flex-shrink: 2;
        background: blue;
    }
</style>

<body>
    <div class="contain">
        <div class="item1"></div>
        <div class="item2"></div>
    </div>
</body>

失去的后果是 item1 的宽度为 140px,item2 的宽度为 160px, 也就是说，item1 的压缩值是 60px，item2 的压缩值为 240px。压缩值算法如下：

加权值 = 每个弹性我的项目的理论内容宽度 * 压缩比例之和
压缩值 = 弹性我的项目的理论内容宽度 压缩比例 弹性盒超出宽度 / 加权值

将下面的示例来演算一下：
弹性盒超出宽度 = 200 + 400 – 300 = 300
加权值 = 200 1 + 400 2 = 1000
item1 压缩值 = 200 1 300 / 1000 = 60
item2 压缩值 = 400 2 300 / 1000 = 240

留神：计算加权值肯定要代入弹性我的项目的理论内容宽度，也就是内容区的宽度。
例如：

<style>
    *{box-sizing:border-box;}
    .contain {
        width: 300px;
        height: 300px;
        background: red;
        display: flex;
    }
        
    .item1 {
        width: 200px;
        height: 200px;
        background: green;
        flex-shrink: 1;
        padding:0 50px;
    }
        
    .item2 {
        width: 400px;
        height: 200px;
        flex-shrink: 2;
        background: blue;
    }
</style>

<body>
    <div class="contain">
        <div class="item1"></div>
        <div class="item2"></div>
    </div>
</body>

失去的后果为 item1 的宽度为 166.67px,item2 的宽度为 133.33px。也就是说 item1 的压缩值为 33.33px,item2 的压缩值为 266.67px。咱们用上述公式求一下压缩值：

加权值 = 100 1 + 400 2 = 900
item1 压缩值 = 100 1 300 / 900 = 33.33
item2 压缩值 = 400 2 300 / 900 = 266.67

用公式求进去的后果与实在后果统一。所以在默认状况下，当弹性盒空间有余时，弹性我的项目的压缩规定如下：

加权值 = 每个弹性我的项目的理论内容宽度 * 压缩比例之和
压缩值 = 弹性我的项目的理论内容宽度 压缩比例 弹性盒超出宽度 / 加权值

正文完