flex求长度

最新推荐文章于 2022-01-07 14:33:12 发布

渣渣前端

最新推荐文章于 2022-01-07 14:33:12 发布

阅读量316

点赞数

分类专栏：面试题

本文链接：https://blog.csdn.net/dtbk123/article/details/106128255

版权

面试题专栏收录该内容

17 篇文章 0 订阅

订阅专栏

flex属性有很多，其中有三个是可以连在一起的，分别是flex-group,flex-shrink,flex-basis.

flex-group属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。

flex-shrink属性定义项目的缩小比例，默认是1，如果空间不足，则该项目会缩小。

flex-basis属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。

所以flex最少可以设置一个值，为flex-group，最多设置三个值

<style>
*{margin:0;
 padding:0;}
.container{
    width:600px;
    height:300px;
    display:flex;
}
.left{flex:1 2 500px;
      background-color:red;
}
.right{flex:2 1 400px;
      background-color:blue;
}
</style>
<body>
    <div class="container">
        <div class="left"></div>
        <div class="right"></div>
    </div>
</body>

首先因为同时设置了flex-group和flex-shrink，所以flex-group无效。

溢出部分为500+400-600=300px，权重为2*500+1*400=1400

两个元素分别收缩

300*flex-shrink*500/1400=214.28（flex-shrink=2）

300*flex-shrink*400/1400=85.72（flex-shrink=1）

所以两个元素宽长度分别为500-214.28=285.72

400-85.72=314.28