先说,当时感觉这个特别有意思,问了身边一圈人,大家都没有注意过,觉得这是一个挺有意思的知识点。
又问了一个同事,同事一番点播,顿时恍然大悟。
基础知识不赘述了,什么弹性盒子啊,弹性盒子剩余空间怎么分配,高度百分比啊。单说弹性盒子嵌套百分比子节点这种特殊的组合。
这种组合很少见,通常情况下,使用到弹性盒子,都是通过子节点和flex相关属性,控制它在父容器中位置,大小。很少见本文提到的这种外层是弹性盒子,子节点却是高度百分比尺寸的情况。
布局很简单,一个红色背景的div,做父容器高度600px,flex,纵向;一个黄色子节点,固定高度300px;一个蓝色子节点,高度为百分比(下图是50%):
css如下:
.container {
height: 600px;
width: 300px;
background-color: red;
display: flex;
flex-direction: column;
}
.c1 {
height: 300px;
width: 250px;
background-color: yellow;
writing-mode: vertical-rl;
color: blue;
}
.c2 {
height: 60%;
width: 200px;
background-color: blue;
writing-mode: vertical-rl;
color: white;
}
一切如常,c1固定高度 + c2百分比高度 * 父节点高度 = 600px
,蓝色div高度就是其百分比乘以父节点高度
。
当减小图中蓝色div高度百分比,也就是c1固定高度 + c2百分比高度 * 父节点高度 <= 600px
时,蓝色div的高度,依然保持着百分比乘以父节点高度
的计算规则。如图,将蓝色div百分比高度改为10%:
当改变蓝色div百分比至100%时,黄色区域,样式中固定高度是300px,布局分析器中,给它预分配的高度也是300px,但是黄色区域从文字情况,以及它超出蓝色宽度部分,可以看出,它最终渲染出来的尺寸,受到了压缩,高度只有200px;而蓝色区域的高度,也没有按照百分比乘以父节点高度
的规则渲染。
看图:
多次调整蓝色区域高度百分比,它的实际高度变化情况如下:
蓝色区域高度百分比 | 蓝色区域实际高度 |
---|---|
60% | 327.27px |
70% | 350px |
80% | 369.23px |
90% | 385.72px |
100% | 400px |
所以,当c1固定高度 + c2百分比高度 * 父节点高度 > 600px
蓝色高度的计算规则是什么,一时让人看不出规律。
最后经大神点播,终于明确了在这种情况下,蓝色区域高度计算规则:
c2百分比高度 * 父节点高度 = c2理想高度
c2理想高度 + c1固定高度 = 父节点理想高度
c2理想高度 / 父节点理想高度 = c2实际百分比
c2实际百分比 * 父节点实际高度 = c2实际高度
将上述规则,应用到c2理想高度100%时,计算公式为:
100% * 600 / (100% * 600 + 300) * 600
正好就是我们看到的400px !
至此,弹性盒子中百分比尺寸计算规则,终于明晰了,扼腕赞叹!