flex元素的自动宽度
flex-basis:auto
//自己设置宽度flex-basis:50px
flex-grow:1//把除了基础宽度意外其他部分的平均分
假设其中一个div为.item:nth-child(1){flex-grow:6},与其他部分宽度的比值等于 (除了基础宽度外其他部分) 6：1
.container{
background-color: aqua;
display: flex;
width: 500px;
}
.item{
flex-basis: 50px;/最小宽度是50px/
flex-grow: 1;/把父容器拉满/
background-color: #f09b9b;
border: #271414 solid 1px;
border-radius: 3px;
box-shadow: 0 5px 10px rgba(244, 62, 62, 0.6);/5是阴影长度，10是阴影渲染模糊/
}
.item:nth-child(1){
flex-grow: 6;
/505=250，还剩250，250/10*6=150 150+50=200
元素1是他们的六倍，初始化有50px所以够grow支配的空间是500-505=250/
}
flex的缩小逻辑（flex-basis&flex-shrink）
flex-shrink:当父容器空间不足时，元素应该按多大比例被压缩
| 属性 | 意义 |
|---|---|
flex-shrink: 0 | 元素不能被压缩 |
flex-shrink: 1 | 默认值，可以等比例压缩 |
flex-shrink: N | 压缩时的比例，数值越大压得越多 |
flex属性里flex-grow,flex-shrink,flex-basis的简写
flex: 0 1 auto (flex:grow shrink basis)
一些默认值：
flex: 0 1 auto === flex: initial;
flex: 1 1 auto === flex:auto;
flex: 0 0 auto === flex:none;
