[ css 弹性盒子模型 flex-basis 属性 ] 弹性盒子模型flex布局中flex-basis属性讲解及实例演示的区别
设置或检索弹性盒伸缩基准值:
如果所有子元素的基准值之和大于剩余空间,则会根据每项设置的基准值,按比率伸缩剩余空间
计算值 – 绝对数:在flex-container主方向大小不足以容纳flex items的flex-basis总和时,浏览器会自动缩小它们
实例:
<!DOCTYPE html> <html > <head> <meta charset="utf-8" /> <title>flex-basis_CSS参考手册_web前端开发参考手册系列</title> <meta name="author" content="Joy Du(飘零雾雨), dooyoe@gmail.com, www.doyoe.com" /> <style> .Grid { color: #FFF; display: -webkit-flex; width: 400px; border: 1px solid red; } .first { background: green; flex-basis: 400px; } .last { background: orange; flex-basis: 200px; } </style> </head> <body> <div class='Grid'> <div class='first'>我曾在天上见过地的繁华</div> <div class='last'>陈三说的</div> </div> </body> </html>
解析:
这里,.first的宽度是267px,.last的宽度是133px,它们是这样计算的:
代码如下 | |
.example-first(宽度) = 400 * (400 / (400 + 200)) = 266.666666667
.example-last(宽度) = 400 * (200 / (400 + 200)) = 133.333333333 |
也就是说,flex container按比例分配flex items的大小
计算值 – 百分比:
百分比的情况与计算值是一样的,如果flex container足够包含flex items的flex-basis总值,则10%的意思就是flex container在主方向的大小乘以10%。
如果flex container不足以包含flex items的flex-basis总值
实例:
<!DOCTYPE html> <html > <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> .example2-Grid { border: 3px solid black; display: -webkit-flex; width:700px; height: 200px; } .example2-Grid div:nth-of-type(1) { background: rgb(0, 137, 250); -webkit-flex-basis: 100%; //190/100 } .example2-Grid div:nth-of-type(2) { background: rgb(105, 0, 88); -webkit-flex-basis: 20%; } .example2-Grid div:nth-of-type(3) { background: rgb(255, 59, 0); -webkit-flex-basis: 30%; } .example2-Grid div:nth-of-type(4) { background: rgb(0, 197, 73); -webkit-flex-basis: 40%; } </style> </head> <body> <div class="example2-Grid"> <div></div> <div></div> <div></div> <div></div> </div> </body> </html>
解析:
其中第一个flex item的flex-basis取值为100%,则计算时,它的main size占比是:
代码如下 | |
100% / (100% + 20% + 30% + 40%) = 52.631578947% |
真正设计或实现页面时,我们通常不可能做这样的计算,但了解计算过程的话,心里有底,碰上问题,就知道怎么解决。