首先flex属性是flex-grow，flex-shrink和flex-basis的缩写 用过不一定知道
邪恶记忆法，叫做“能大能小的鸡鸡”。grow是增加变大意思，shrink是收缩变小的意思，而basis是基（鸡）础基（鸡）准的意思，于是连起来就是“能大能小的鸡鸡”。帅气
你可以这样理解
1.flex-basis就是分配固定的家产数量。
2.flex-grow就是家产剩余家产仍有富余的时候该如何分配。
3.flex-shrink就是家产剩余家产不足的时候该如何分配。
语法
flex: none | auto | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
flex: auto;
flex: none;
/* 1个值，flex-grow */
flex: 1;
/* 1个值，flex-basis */
flex: 100px;
/* 2个值，flex-grow和flex-basis */
flex: 1 100px;
/* 2个值，flex-grow和flex-shrink */
flex: 1 1;
/* 3个值 */
flex: 1 1 100px;
关键属性
1.initial
window.getComputedStyle(document.body).flex;
就是flex属性默认值是"0 1 auto"，等同于initial关键字的计算值。
2.auto
flex:auto等同于设置"flex: 1 1 auto"
3.none
flex:none等同于设置"flex: 0 0 auto"
一定要牢记这3个属性默认值，不然遇到只有1~2个参数时候，根本不知道什么意思。
flex-grow flex-grow指定了容器剩余空间多余时候的分配规则，默认值是0，多余空间不分配。 flex-shrink flex-shrink指定了容器剩余空间不足时候的分配规则，默认值是1，空间不足要分配。 flex-basis flex-basis则是指定了固定的分配数量，默认值是auto。如会忽略设置的同时设置width或者height属性。flex-basis包含大量的细节知识，这个可以专门开一篇文章深入探讨。’
