今天群里有人做题发了一道题,由于最近在学习flex布局,就不禁研究了起来...

已知HTML结构如下,以下哪些CSS可以实现左列定宽(100px)右列宽度自适应的布局?

     
    
      
       左列
      
    
      
       右列
      
     

(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选项:

全部都试过一边了,首先是左列定宽的条件,这个条件在平时看其实ABC都似乎没什么问题.起码在我们大屏时看起来毫无问题.

而B选项中定宽左列将保持100px,知道将右边挤压到消失.

那怎么让A,C选项获得和B一样的效果呢?

那就是使用flex-shirink属性了

该属性定义了缩小比例,默认值为1,不可为负值.

在flex属性中顺序为:flex:flex-grow flex-shirink flex-basis;

我们让.left的flex-shirink:0,就可以保证.left不会因为剩余空间不足而被缩小了.

关于flex-shirink属性中容易理解的文章

至于关于数值不同导致压缩的不同程序上述文章也有所介绍,大家可以去看一下.

至于题目到底该选什么...

我也是不知道的...