参考 wxk_前端开发
1,flex:1
flex:1
等价于
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
对于flex-grow 默认为0 即就算有多余空间 也不扩张
对于flex-shrink默认为1即有多余空间 缩小
flex-basis默认为auto 在没有分配多余空间之前 自动使用自己的宽度
所以想要实现自适应布局使用flex:1,
2,flex:none
flex:none
等价于
flex-grow: 0;
flex-shrink: 0;
flex-basis: auto;
代表 既不扩张也不缩小 按照basis的宽度 即元素自己的宽度
2,flex:auto
flex:auto
等价于
flex-grow: 1;
flex-shrink: 1;
flex-basis: auto;
字面意思 代表 即扩张又可以缩小 但是按照basis的宽度 即元素自己的宽度
我有点迷 跟我想象的样式不一样
接下来很有趣 这三种写法一致:
flex:1,只有一个值 为非负数 代表的是 flex-grow ,flex-shrink 取 1,flex-basis 取 0%
flex:0% 只有一个值 为百分比 代表的是flex-basis:0%,flex-grow ,flex-shrink 取 1
flex: 1 1,有两个非负数 代表的分别是flex-grow 和 flex-shrink 的值 flex-basis 取 0%
flex:1 0% 有一个非负数和百分比 代表的是flex-grow和 flex-basis 的值flex-shrink取1