flex复合属性
来源：3-12 flex布局-项目的属性
hyperse
2019-08-07 15:22:49
我在问答里看到老师说
设置flex: auto;元素会根据自身的宽度与高度来确定尺寸，这相当于将属性设置为 "flex: 1 1 auto"，三种写法实现的效果都是一样的，还有一种是flex:1对吗？
视频里说flex:1代表flex: 1 1 0%，那是不是flex:1 1 0%等同于flex:1 1 auto呢？
总结一下老师看看对不对：flex:1; flex: 1 1 auto; flex: 1 1 0%；三者效果相同
2回答
-
好帮手慕慕子
2019-08-07
同学你好， 总结的有些偏差哦 flex: 1; 和flex: auto;这两个实现的效果是不一样的
flex:1; 是flex: 1 1 0%；的缩写， 这两个的效果是一样的
flex: auto; 是flex: 1 1 auto;的缩写， 这两个实现的效果是一样的
老师这里给同学举一个简单的示例， 帮助同学理解
flex：auto;的情况，
效果图：每个项目文字到项目边界之间的距离是相等的
设置flex:1;后
效果图如下所示， 每个项目占据的空间是相等的
还有一点区别就是，对项目设置width值的影响
（1）设置flex:auto;之后，给项目设置width值是生效的， 在计算项目伸缩空间的时候需要减去width值，然后在均分剩余的空间。
效果图：
（2）设置flex：1；之后， 给项目设置width值不会生效， 但是单独设置flex:basis会生效
效果图：
同学可以自己下去测试一下， 结合代码实现的效果帮助自己理解，然后总结一下笔记，加深记忆哦
如果帮助到了你， 欢迎采纳！
祝学习愉快~~~~
0 -
hyperse
提问者
2019-08-07
而且flex:1 1 0%这种写法代表flex-basis等于0%，那不是相当于所占宽度（或高度）等于百分之零了？岂不是会看不见拥有该属性的项目啦。。
0
相似问题