今天就跟大家讲讲flex：1是什么的缩写，怎么去理解这个样式。
首先要知道flex:1就是
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0;
的缩写，首页要理解它们的作用，先看dom解构
<div class="parent"><div class="son"></div><div class="son"></div><div class="son"></div><div class="son"></div></div>
做项目时先看flex-basic
情景一
如果
.son{flex-basic:auto;width:100px;
}
那么son的初始宽度由son的width决定
情景二
如果
.son{flex-basic:auto;
}
没有width，那么son的初始宽度是0
情景三
如果 flex-basic和width都没有，那么son的初始宽度是0
接下来就是看flex-grow: 和flex-shrink了，如果flex-grow: 1;那么，son的分割parent的剩余空间，如果flex-grow: 0，就不瓜分parent的剩余空间
如果flex-shrink:1并且所有son的总宽度大于parent的宽度，那么son就会被压缩，如果flex-shrink:0就不压缩son的宽度
)
