flex:1

       这个一个非常简单实用的布局用法。它是 CSS 中 Flexbox 布局的一个简写属性， 相当于同时设置了三个属性：
flex-grow: 1 - 元素可以放大，占据剩余空间
flex-shrink: 1 - 元素可以缩小，适应空间不足的情况
flex-basis: 0% - 元素的基准尺寸为 0%

     举例如下，一看就知道用法：

<div style="display: flex; height: 200px; border: 1px solid #ccc;"><div style="flex: 1">占三分之一宽度</div><div style="flex: 1">占三分之一宽度</div><div style="flex: 1">占三分之一宽度</div>
</div><div style="display: flex; height: 200px; border: 1px solid #ccc;"><div style="flex: 1">占六分之一宽度</div><div style="flex: 2">占六分之二宽度</div><div style="flex: 3">占六分之三宽度</div>
</div>

其他的简写有：

flex: initial：默认值，等价于 flex: 0 1 auto（不扩展，允许收缩，初始大小为内容宽度）。
flex: none：等价于 flex: 0 0 auto（既不扩展也不收缩，固定为内容宽度）。
flex: auto：等价于 flex: 1 1 auto（扩展和收缩，初始大小为内容宽度）。