首页 > 代码库 > 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宽度总结
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。