flex: 1，flex: auto，flex: 0，flex: none 的区别

flex复合属性

flex: 0 1 auto 默认值

1.flex-grow (扩展)，默认为 0，即如果存在剩余空间，也不放大。
2.flex-shrink (收缩)，默认为 1，即如果空间不足，该项目将缩小。
3.flex-basis (项目的长度) 在分配多余空间之前，项目占据的主轴空间，相当于我们设置的width，

缩写

「flex: 1」, 则其计算值为「1 1 0%」相当于可扩大，可缩小,自动填充满剩余空间
「flex: auto」, 则其计算值为「1 1 auto」相当于可扩大，可缩小,自动填充满剩余空间
    
「flex: 0」, 则其计算值为「0 1 0%」  相当于不可扩大，可缩小，表现形式为最小内容宽度
「flex: none」, 则其计算值为「0 0 auto」不可扩大，不可缩小，内容本身的宽度是多少就是多少

flex布局中flex:1和flex:auto的区别

flex: 1   不管内容多少，一般都是平分空间，空间大小都一致
flex: auto  根据内容的大小来分，不是均分的（除非内容都是一样，才均分）。

举例：

所以: flex:1 更适合在等比例列表时使用，
	  flex：auto适用于元素充分利用剩余空间，比如头部导航文字多少不一致时使用