今天群里有人做题发了一道题,由于最近在学习flex布局,就不禁研究了起来...
题目如下:
已知HTML结构如下,以下哪些CSS可以实现左列定宽(100px)右列宽度自适应的布局?
<div class="parent"><div class="left">左列</div><div class="right">右列</div></div>(A)
.parent{display:flex;}.left{width:100px;}.right{flex:1;}(B)
.parent{overflow:hidden;}.left{float:left;width:100px;}.right{overflow:hidden;}(C)
.parent{display:flex;}.left{width:100px;}.right{flex:auto;}(D)
.parent{overflow:hidden;}.left{float:left;width:100px;}.right{float:right;width:100%;}
A选项:
/thewindsw...
B选项:
/thewindsw...
C选项:
/thewindsw...
D选项:
/thewindsw...
全部都试过一边了,首先是左列定宽的条件,这个条件在平时看其实ABC都似乎没什么问题.起码在我们大屏时看起来毫无问题.
但是在A,C选项的flex布局中当我们屏幕变小直到小于100px(定宽)+右边容器内容宽度时,我们就发现定宽的.left开始缩小了.
/fafosu/32/ed...
而B选项中定宽左列将保持100px,知道将右边挤压到消失.
D选项则是没什么好解释的了.
那怎么让A,C选项获得和B一样的效果呢?
那就是使用flex-shirink属性了
该属性定义了缩小比例,默认值为1,不可为负值.
在flex属性中顺序为:flex:flex-growflex-shirinkflex-basis;
我们让.left的flex-shirink:0,就可以保证.left不会因为剩余空间不足而被缩小了.
关于flex-shirink属性中容易理解的文章http://zhoon.github.io/css3/2...
至于关于数值不同导致压缩的不同程序上述文章也有所介绍,大家可以去看一下.
至于题目到底该选什么...
我也是不知道的...
有人知道正确答案么
