（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的屬性優先級會更高