最近做项目遇到个需求：水平方向有四个元素，间距大小不一样，需要做自适应，开始通过设置之间的padding
后来发现屏幕大小变化以后，会出现滚动条，不能自适应，之前用过flex:1，没有仔细研究这个属性，今天特意
研究一下： flex: param1 param2 param3 ,主要是：控制 Flex 子元素在主轴上的比例，这个写法其实是：

flex-grow: 这个 flex 子元素得到（伸张）多少 positive free space? //解决除去自身的宽度，如果还有剩余空间，如何分配的问题 flex-shrink: 从这个 flex 子元素要消除（收缩）多少 negative free space? // 解决父级空间小于子元素的宽度时候，子元素如何收缩的问题，一般直接设为1，表示支持缩放 flex-basis: 在 flex 子元素未伸张和收缩之前，它的大小是多少？ // 子元素默认大小

的缩写。

比如我这里有三个元素： A B C

16---A----20----B----50-----C-----60

那么可以分别加样式(加入 A B C的宽度分别为：10 20 30 )：

A: flex: 20 1 10px margin-left:16px

B: flex: 50 1 20px

C: flex: 60 1 20px

即可实现自适应