码迷,mamicode.com
首页 > Web开发 > 详细

[ css 弹性盒子模型 flex-shrink 属性 ] 弹性盒子模型flex布局中flex-shrink属性讲解及实例演示的区别

时间:2016-07-08 01:25:55      阅读:151      评论:0      收藏:0      [点我收藏+]

标签:

根据弹性盒子元素所设置的收缩因子作为比率来收缩空间

实例:

<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
<meta charset="utf-8" />
<title>-webkit-flex-basis_CSS参考手册_web前端开发参考手册系列</title>
<meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" />
<style>
.flex {
    display: -webkit-flex;
    width: 400px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.flex li {
    width: 200px;
}

.flex li:nth-child(3) {
    flex-shrink: 3;
}
</style>
</head>
<body>
    <ul class="flex">
        <li style=‘background: #F00;‘>a</li>
        <li style=‘ background: #0F0;‘>b</li>
        <li style=‘background: #00F;‘>c</li>
    </ul>
</body>
</html>

分析:

flex-shrink的默认值为1,如果没有显示定义该属性,将会自动按照默认值1在所有因子相加之后计算比率来进行空间收缩。

本例中c显式的定义了flex-shrink,a,b没有显式定义,但将根据默认值1来计算,可以看到总共将剩余空间分成了5份,其中a占1份,b占1份,c占3分,即1:1:3

我们可以看到父容器定义为400px,子项被定义为200px,相加之后即为600px,超出父容器200px。那么这么超出的200px需要被a,b,c消化

通过收缩因子,所以加权综合可得200*1+200*1+200*3=1000px;
于是我们可以计算a,b,c将被移除的溢出量是多少:
a被移除溢出量:(200*1/1000)*200,即约等于40px
b被移除溢出量:(200*1/1000)*200,即约等于40px
c被移除溢出量:(200*3/1000)*200,即约等于120px
最后a,b,c的实际宽度分别为:200-40=160px, 200-40=160px, 200-120=80px

[ css 弹性盒子模型 flex-shrink 属性 ] 弹性盒子模型flex布局中flex-shrink属性讲解及实例演示的区别

标签:

原文地址:http://www.cnblogs.com/mysearchblog/p/5651993.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!