对flex的理解

参考 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