flex宽度总结

Posted 2020-09-20

flex宽度相关的属性有三个 flex-grow，flex-shrink，flex-basis。下面分别介绍其相关特点：

flex-grow 扩大因子，主轴有剩余空间时，元素分配到剩余空间的比率

flex-shrink 收缩因子，主轴剩余空间为负时，元素分配到剩余空间的比率

flex-basis：设置元素初始大小，若未设置，则水平排列默认为元素的宽度，垂直排列默认为元素的高度

当flex-basis为0时，例如(flex:1)，此时item的宽度不受width的影响

当flex-basis为auto时，item的宽度随着width的变化增大或缩小

flex是flex-grow，flex-shrink，flex-basis的简写，简称GSB

flex的写法与三个属性的对照表

flex: none => flex: 0 0 auto;
flex: auto => flex: 1 1 auto;
flex: 0 => flex: 0 1 0%;
flex: 1 => flex: 1 1 0%;
flex: 0 auto => flex: 0 1 auto;(默认值)
flex: 0 1 => flex: 0 1 0%;