flex 属性是以下 CSS 属性的简写
- flex-grow
- flex-shrink
- flex-basis
flex-basis属性定义了项目在分配多余空间之前，占据的主轴空间（main size)
flex: initial, none, 1, auto的区别：
initial
元素会根据自身宽高设置尺寸。它会缩短自身以适应 flex 容器，但不会伸长并吸收 flex 容器中的额外自由空间来适应 flex 容器。相当于将属性设置为"flex: 0 1 auto"。
none
元素会根据自身宽高来设置尺寸。它是完全非弹性的：既不会缩短，也不会伸长来适应 flex 容器。相当于将属性设置为"flex: 0 0 auto"。
flex:1 适合等分布局
表示项目的基准大小为0%，不考虑项目本身的大小，只根据剩余空间进行伸缩。相当于flex: 1 1 0%，
auto 适合基于内容动态适配的布局
元素会根据自身的宽度与高度来确定尺寸，但是会伸长并吸收 flex 容器中额外的自由空间，也会缩短自身来适应 flex 容器。这相当于将属性设置为 "flex: 1 1 auto".
