（1）flex-grow：用于设置或检索弹性盒子的扩展比率(当设置number的时候，是相对于其他子元素的扩展比例)
只有当子元素的总和小于父元素，也就是父元素有多余的分配空间的时候才起作用,当子元素的总和大于父元素的时候，只会平均分配
（2）flex-direction：规定灵活项目的方向
flex-direction: row|row-reverse|column|column-reverse|initial|inherit;
（3）flex-shrink：指定了 flex 元素的收缩规则。flex 元素仅在默认宽度之和大于容器的时候才会发生收缩，其收缩的大小是依据 flex-shrink 的值。（如果不想被缩减的话则设置为0,）
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>ccc</title>
<style>
#content {
display: flex;
width: 500px;
}
#content div {
flex-basis: 130px;
border: 3px solid rgba(0,0,0,.2);
}
.box {
flex-shrink: 1;
}
.box1 {
flex-shrink: 2;
}
</style>
</head>
<body>
<div id="content">
<div class="box" style="background-color:red;">A</div>
<div class="box" style="background-color:lightblue;">B</div>
<div class="box" style="background-color:yellow;">C</div>
<div class="box1" style="background-color:brown;">D</div>
<div class="box1" style="background-color:lightgreen;">E</div>
</div>
</body>
</html>
子元素的总和是：130*5=650，此时子元素的总和大于父元素的宽度，超出的宽度是650-500=150，那么子元素设置了flex-shrink，那么子元素就需要按照一定的比例减去溢出后得到子元素的宽度（这个宽度包含边框）。子元素的收缩比例是： (1:1:1:2:2),那么总的收缩比就是7份。
对于A，B,C：150/7约为21，那么A此时需要收缩的宽度为21，那么A的宽度为130-21=109
对于D，E：150/7*2约为42，那么A此时需要收缩的宽度为42，那么A的宽度为130-42=87
(4)flex-basis:用于设置或检索弹性盒伸缩基准值
flex-basis: number|auto|initial|inherit;
flex-basis的优先级比width高。如果flex-basis和width其中有一个是auto，那么另外一个非auto的属性优先级会更高