戏说flex-grow、flex-shrink、flex-basis

来源：互联网发布：小马oem 知乎编辑：程序博客网时间：2024/05/21 09:15

flex-basis

设置子元素宽度。

如果元素也设置了宽度width，则flex-basis会覆盖width。

<!doctype html><html><head>    <style type="text/css">         #main {            display: flex;            border: 1px solid black;                width: 400px;            height: 300px;        }        #div1 {            width: 70px;            height: 70px;            background-color: pink;            flex-basis:40px;  /*该行取代width，所以div1宽度与其他不一样*/        }        #div2 {            width: 70px;            height: 70px;            background-color: orange;        }        #div3 {            width: 70px;            height: 70px;            background-color: green;        }        #div4 {            width: 70px;            height: 70px;            background-color: yellow;        }    </style></head><body>    <div id="main">        <div id="div1"></div>        <div id="div2"></div>        <div id="div3"></div>        <div id="div4"></div>    </div></body></html>

在线演示
这里写图片描述

flex-grow

设置子元素扩展比率。默认为0，不扩展。值越大，扩展越大。

顾名思义，grow嘛，就是长大，设置它长大多少嘛。有两种情况：

1、父元素的宽度大于子元素的宽度

举个栗子：老子富得流油，已经分了家产给几个儿子。后来又赚了一点，怎么分配给几个儿子呢，按需分配！（有点像未来的和谐社会啊），按比例将钱分掉。这个比例就是根据flex-grow计算的。
老子有400万，已经分给4个儿子每人50万，还剩 200万，这剩下的200万怎么分呢，大儿子说：“我最大，我要两份“。其他三个儿子说：“那我们小弟们我们就一人一份吧“。于是，这剩下的200万就分成了2+1+1+1=5份，每份200/5=40万，大儿子就又拿了80万，他一共有了130万。其他三个小儿子各拿了40万，一人有90万。

<!doctype html><html><head>    <style type="text/css">         #main {            border: 1px solid black;                width: 400px;            height: 300px;            display: flex;        }        #div1 {            flex-grow:2;     /*我还要剩下中的2份*/            width: 50px;    /*我已经分了这么多*/            height: 70px;            background-color: pink;        }        #div2 {            flex-grow:1;            width: 50px;            height: 70px;            background-color: orange;        }        #div3 {            flex-grow:1;            width: 50px;            height: 70px;            background-color: green;        }        #div4 {            flex-grow:1;            width: 50px;            height: 70px;            background-color: yellow;        }    </style></head><body>    <div id="main">        <div id="div1"></div>        <div id="div2"></div>        <div id="div3"></div>        <div id="div4"></div>    </div></body></html>

在线演示
这里写图片描述
除了div1是130px，其他都是90px。

当然，还有一种情况，就是其他三个小儿子说：“长兄如父，大哥照顾我们太辛苦了，剩下的钱我们都不要，都给他吧。”那么，不管大哥要几份（flex-grow：1或2或3…），他都会拿到50+200=250万。
在线演示
这里写图片描述
如果大哥要0.5份，则他会拿到50+200*0.5=150万，但是小儿子们还是只有50万哦

2、父元素的宽度小于子元素的宽度

老子家徒四壁，好不容易攒了点钱，想给四个儿子买身衣服。奈何现在物价上涨厉害，不够买四套了。老子说：“儿子啊，不管你们想要啥样的，都买不了了（flex-grow不起作用）。我就买点布料，根据你们的身高比例分给你们，你们自己做吧，将就将就，别走光就行了。我看看啊，大儿子1米高，二儿子1米高，三儿子0.5米高，四儿子0.5米高，我这有15米布料，大儿子和二儿子各拿15*1/(1+1+0.5+0.5)=5米，三儿子和四儿子各拿 15*0.5/(1+1+0.5+0.5)=2.5米。”

<!doctype html><html><head>    <style type="text/css">         #main {            border: 1px solid black;                width: 150px;            height: 300px;            display: flex;        }        #div1 {            flex-grow:1;    /*与下面的子div一样，不管有无该属性或者值为多少，都无效*/            width: 100px;            height: 70px;            background-color: pink;        }        #div2 {             flex-grow:1;            width: 100px;            height: 70px;            background-color: orange;        }        #div3 {             flex-grow:1;            width: 50px;            height: 70px;            background-color: green;        }        #div4 {            flex-grow:2;            width: 50px;            height: 70px;            background-color: yellow;        }    </style></head><body>    <div id="main">        <div id="div1"></div>        <div id="div2"></div>        <div id="div3"></div>        <div id="div4"></div>    </div></body></html>

在线演示
这里写图片描述

flex-shrink

设置子元素缩小比率。默认为1，当父元素宽度小于子元素宽度之和，子元素宽度缩小。值越大，缩小的越厉害。值为0则不缩小。

1、父元素的宽度大于子元素的宽度

还是上面那一家人，老子给几个儿子分了家产，手里还有几个小钱，就去打牌，呦呵，老子原来是亚洲赌王尼古拉斯·赵四，赢了不少钱。儿子们也高兴，不用还钱啊（flex-shrink无效果）。

<!doctype html><html><head>    <style type="text/css">         #main {            border: 1px solid black;                width: 400px;            height: 300px;            display: flex;        }        #div1 {            flex-shrink:0;  /*有无该属性或者何值无影响*/            width: 100px;            height: 70px;            background-color: pink;        }        #div2 {            flex-shrink:1;            width: 50px;            height: 70px;            background-color: orange;        }        #div3 {            flex-shrink:2;            width: 50px;            height: 70px;            background-color: green;        }        #div4 {            flex-shrink:1;            width: 50px;            height: 70px;            background-color: yellow;        }    </style></head><body>    <div id="main">        <div id="div1"></div>        <div id="div2"></div>        <div id="div3"></div>        <div id="div4"></div>    </div></body></html>

在线演示
这里写图片描述

2、父元素的宽度小于子元素的宽度

老子赢了钱有点膨胀，觉得自己已然是世界赌王了。可惜，去拉斯维加斯战斗的时候败走麦城，倾家荡产，连分给四个儿子的钱都已经输了。老子哭爹喊娘，感动了赌场，一番协商，赌场同意给老子留下一笔养老钱200万。于是，赌场打电话赎人，四个儿子都来了。大家将各自分的家产都放在了桌上，商量每个人给多少钱赌场。大儿子说：“我当初分了100万，你们三个各分了50万，我们一共有250万，只要交250-200=50万给赌场就行了。就按照家产的比例赔吧，这50万我出50*100/250=20万，你们各出10万，行不？”大家沉默不语，正当准备出钱的时候，最聪明的小儿子突然说：“不行！你当初分的家产是一套房子，按照当时的物价值100万，我们三个都是50万的现金。你看看，现在物价上涨多厉害，你这房子现在也不止100万了啊，我估计还得涨呢，你应该多出点。”大家一听，很有道理啊，顿时掌声经久不息。于是，大家上至天文，下至地理，从航天员在太空怎么解决生理需求到一滴水根据重力加速度到达地面产生的作用力是否可以砸死人等问题展开了热烈讨论。最终，一致看好明年房价翻番，大儿子其实有200万呢，是得多出点。于是，50万赔偿具体如下：大儿子50*(2*100/(2*100+50+50+50))=28.58万，其他三个儿子50*(50/(2*100+50+50+50))=7.14万。赔完钱，大儿子剩下100-28.58=71.42万，其他三个儿子剩下50-7.14=42.86万，带着老子回家了。老子留下一句：“赌博赢钱水中月，锄头底下出黄金”，气绝身亡，完。

<!doctype html><html><head>    <style type="text/css">         #main {            border: 1px solid black;                width: 200px;            height: 300px;            display: flex;        }        #div1 {            flex-shrink:2;    //这就是"物价"            width: 100px;            height: 70px;            background-color: pink;        }        #div2 {            flex-shrink:1;            width: 50px;            height: 70px;            background-color: orange;        }        #div3 {            flex-shrink:1;            width: 50px;            height: 70px;            background-color: green;        }        #div4 {            flex-shrink:1;            width: 50px;            height: 70px;            background-color: yellow;        }    </style></head><body>    <div id="main">        <div id="div1"></div>        <div id="div2"></div>        <div id="div3"></div>        <div id="div4"></div>    </div></body></html>

在线演示
这里写图片描述

最后

总结一下：

老子没钱，儿子想啥都没有（flex-grow无效）；
老子有钱，儿子不赔钱（flex-shrink无效）；
赌博害人。

阅读全文

0 0