flex布局中flex:01auto是什么
flex:0 1 auto;
flex是flex-grow,flex-shrink,flex-basis3个属性结合在⼀起的缩写形式,后两个属性可选写
flex-grow
表⽰当⼦元素的空间⼩于⽗元素的空间时,如何处理剩余空间,
默认值为0表⽰不占有剩余空间;
当⼦元素都设置为1时表⽰平均分配剩余空间;
当⼀个⼦元素为2其余⼦元素为1时为2的⼦元素占据的剩余空间⽐其他⼦元素多⼀倍;
当⼀个⼦元素为1其余⼦元素为0,为1的⼦元素占据全局剩余空间
felx-shrink
表⽰当⼦元素的空间⼤于⽗元素的空间时,如何缩⼩⼦元素
html的flex布局默认值为1表⽰等⽐缩⼩
当所有⼦元素都设置为1时所有⼦元素都会等⽐例缩⼩
当⼀个⼦元素为0其余⼦元素为1是表⽰为0的⼦元素不缩⼩,其余元素缩⼩
flex-basis
⽤于设置项⽬占据的主轴空间,设置为auto表⽰项⽬占据的主轴⼤⼩等于项⽬的实际内容⼤⼩,设置为固定值表⽰项⽬占据的主轴⼤⼩等于固定值
版权声明:本站内容均来自互联网,仅供演示用,请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198,我们将在24小时内删除。
发表评论