本文深入探讨了Flex布局中flex属性的缩写形式`flex: 0 1 auto;`。它分别代表flex-grow、flex-shrink和flex-basis。flex-grow指定元素如何分配额外空间，flex-shrink则定义了元素在空间不足时的缩小比例，而flex-basis设定元素在主轴上的初始大小。通过这个属性组合，开发者可以更精确地控制弹性布局中元素的行为。
flex布局中flex:0 1 auto是什么
flex:0 1 auto;
flex是flex-grow,flex-shrink,flex-basis3个属性结合在一起的缩写形式,后两个属性可选写
flex-grow
表示当子元素的空间小于父元素的空间时,如何处理剩余空间,
默认值为0表示不占有剩余空间;
当子元素都设置为1时表示平均分配剩余空间;
当一个子元素为2其余子元素为1时为2的子元素占据的剩余空间比其他子元素多一倍;
当一个子元素为1其余子元素为0,为1的子元素占据全局剩余空间
felx-shrink
表示当子元素的空间大于父元素的空间时,如何缩小子元素
默认值为1表示等比缩小
当所有子元素都设置为1时所有子元素都会等比例缩小
当一个子元素为0其余子元素为1是表示为0的子元素不缩小,其余元素缩小
flex-basis
用于设置项目占据的主轴空间,设置为auto表示项目占据的主轴大小等于项目的实际内容大小,设置为固定值表示项目占据的主轴大小等于固定值
扫一扫
332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
