flex:1含义及flex三属性详解

平时我们都是写flex:1;那么flex:1具体的三个值都是什么呢?

flex: 1 1 auto;

如果不写flex的话,默认值是什么呢?

flex: 0 1 auto;

所以我们设置的这个1其实设置的是flex-grow这个属性,首先讲flex-grow是什么:

flex-grow:子盒子除了基础宽度外所占父盒子多余空间的比例

例子: 父盒子500px,子盒子1占1份,基础宽度为50px,子盒子2占2份,基础宽度为70px,那么父盒子多余空间就是:500-50-70=380px,总共父盒子就是被分成了3份,子盒子1的真实大小为50+380*1/3,子盒子2的真实大小为70+380*2/3;

flex-basis:子盒子的基础宽度

flex-basis决定了子盒子一开始的宽度,假如width设置了200,flex-basis不设置默认就是auto,最终宽度就会采用width,如果width不设置就是auto,flex-basis设置100,最终宽度就会采用100,如果两者都不设置,就都为auto,那么子盒子的最终宽度就是内容大小来决定,被内容撑开;如果两者都设置,则flex-basis会覆盖width,最终采用flex-basis;

flex-shrink:子盒子除了基础宽度外所占父盒子溢出空间的比例

shrink和grow则相反,假如父盒子500,子盒子的宽度加起来为600,那么就溢出了100,flex-shrink就决定了每个子盒子占100的比例,子盒子的最终宽度就是基础宽度或者width加上溢出这一部分的宽度;

最后补充一下三者的单位:flex-grow和flex-shrink都是比例,flex-basis单位可以是百分比,像素

最后

以上就是优美茉莉为你收集整理的flex:1含义及flex三属性详解的全部内容，希望文章能够帮你解决flex:1含义及flex三属性详解所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。