前言：最近做微信小程序css样式一直用到弹性盒子，老唐讲的弹性盒子的基本属性都用上了，但是，网上看别人案例有些没见过了，所以就看了阮一峰的博客。里面的介绍确实详尽，http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html。
因为主要就项目属性的部分属性没怎么弄明白，所以只是做了部分测试，分别是flex-grow，flex-shrink，flex-basis、flex。
html代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
body {
background-color: black;
}
#main {
width: 80%;
margin:300 auto;
height: 100px;
background-color: white;
/* 开启弹性盒子 */
/* display: flex; */
}
#main>div {
width: 80px;
/* flex-basis: 200px; */
/* flex-grow:1 ;/* grow 美[ɡroʊ] 扩大成长 */
/*flex-shrink: 0;/* shrink美[ʃrɪŋk] 收缩缩小 */
/* flex:none; */
height: 50px;
line-height: 50px;
background-color: aquamarine;
}
</style>
</head>
<body>
<div id="main">
<div>
1
</div>
<div>
2
</div>
<div>
3
</div>
<div>
4
</div>
<div>
5
</div>
<div>
6
</div>
</div>
</body>
</html>
弹性盒子开启前
开启后：
动态效果：
flex-grow：1
动态效果：
flex-shrink：0 动态：
flex-basis：
flex:auto 动态：
flex:none 动态：
然后我们看看阮大大的话
flex-grow
属性定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
就是说，flex-grow是项目放大分配空余空间各个元素所占的比例
flex-shrink
属性定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
就是说，flex-shrink是项目缩小时，各个元素收缩所占的比例，为了就是死活不收缩
flex-basis
属性定义了在分配多余空间之前，项目占据的主轴空间（main size）。浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即项目的本来大小。
就是说，没分配空间前，重新设置项目主轴方向的长度，横向就是width宽度，纵向就是height高度
flex
属性是flex-grow, flex-shrink 和 flex-basis的简写，默认值为0 1 auto。后两个属性可选。
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
建议优先使用这个属性，而不是单独写三个分离的属性，因为浏览器会推算相关值。
就是说，设置flex：auto放大缩小项目主轴长度都会重新分配，flex：none放大缩小弹性盒子，项目主轴长度保持初始状态，一般的我们在做项目时候最好只用这个属性替代前面的flex-grow，flex-shrink，flex-basis，比如：flex：1浏览器就会自动推算相关值。