首页 > 代码库 > flex宽度总结

flex宽度总结

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%;

flex宽度总结