先了解剩余空间
flex有剩余空间
flex-grow
单个item设置1 占满
多个设置数字 按比例分配
flex-basis 与width
flex-basis=0 由内容撑开
flex:basis 父元素的百分比值
如果一个auto 另一个生效
flex-basis优先级高于width
flex-basis和width为auto值，那最后的空间就是根据内容多少来定的，内容多占据的水平空间就多。
flex环境默认是不换行的，即使父容器宽度不够也不会，除非设置flex-wrap来换行
未超出父元素情况下 flex-shrink 无效
超出父元素
flex-shrink 让元素在行里缩小
由于flex环境的父容器的宽度500px是不会变，所以为了是子容器的宽度和最多为父容器的宽度，
那就只有两个办法：第一个是使子容器换行，第二个是压缩子容器使之刚好撑满父容器的宽度。
因为flex子容器是默认不换行的，所以这里不做讨论。
而第二种压缩，实际上就是上面例子表现出来的样式。
现在就遇到了上面第二个问题，这三个的压缩比例是多少呢，各自需要压缩的空间是多少呢？
这个时候就需要谈谈flex-shrink，这个属性其实就是定义一个子容器的压缩比例。
他的默认值是1，所以上面那个例子，就是三个子容器压缩的比例是一样的 1:1:1。
如果此时我们设置B1的压缩比例是2，那会怎样呢？
剩余空间＝父容器空间－子容器
1.flex-basis/width - 子容器2.flex-basis/width - …
2、如果父容器空间不够，就走压缩flex-shrink，否则走扩张flex-grow；
3、如果你不希望某个容器在任何时候都不被压缩，那设置flex-shrink:0；
4、如果子容器的的flex-basis设置为0(width也可以，不过flex-basis更符合语义)，
那么计算剩余空间的时候将不会为子容器预留空间。
5、如果子容器的的flex-basis设置为auto(width也可以，不过flex-basis更符合语义)，
那么计算剩余空间的时候将会根据子容器内容的多少来预留空间。
content –> width –> flex-basis (limted by max|min-width)
如果没有设置flex-basis属性，那么flex-basis的大小就是项目的width属性的大小
如果没有设置width属性，那么flex-basis的大小就是项目内容(content)的大小
flex 是
flex-grow、 1 占满剩余空间 2也是占满空间 以此类推
flex-shrink、 0 任何情况都不被压缩
flex-basis 0% 该项目本来的大小
.item {flex: 1;}
.item {
flex-grow: 1; 占满剩余空间
flex-shrink: 1; 压缩比例，一般默认1，其他元素不设置shrink,就不影响
flex-basis: 0%; 该项目本来的大小
}
flex-basis content 由内容撑开
flex-basis: 0%; 使用width