flex
flex属性
flex属性是flex-grow, flex-shrink 和 flex-basis的简写, 默认值是0 1 auto。
flex-grow是如果有剩余空间，是否扩大，0为不扩大
flex-shrink是如果剩余空间不够，是否缩小，1为缩小
flex-basis为项目本身的大小，默认值是auto
flex: 1
flex: 1, 对应的是1 1 0%, 相当于可扩大，可缩小，flex-basis为0%
flex: auto
flex: auto, 对应的是1 1 auto, 相当于可扩大，可缩小，flex-basis为auto
解释：
flex: 1 不管内容多少，一般都是平分空间，空间大小都一致
而flex: auto是根据内容的大小来分，不是均分的（除非内容都是一样，才均分）
flex: 0
flex: 0, 对应的是0 1 0%, 相当于不可扩大，可缩小，flex-basis为0%
flex: none
flex: none, 对应的是0 0 auto, 相当于不可扩大，不可缩小，flex-basis为auto
解释：
flex: 0 不可扩大，可缩小,表现形式为最小内容宽度, 上图你可以看到div的宽度就是一个字的宽度
而flex: none 不可扩大，不可缩小，内容本身的宽度是多少就是多少
