上篇講了彈性盒子中盒子的一些屬性，這篇講子項的屬性
目錄
1.order
2.aligh-self
3.flex-grow
4.flex-basis
5.flex-shrink
1.order
設定或檢索彈性盒子子項出現的順序，預設值為0，按數值大小由小到大排列
【例1】使用order将下列子項逆序
【代碼】
<!DOCTYPE html>
<html >
<head>
<style>
.wrapper {
margin: 20px;
width: 150px;
height: 150px;
border: 1px solid #424242;
display: flex;
}
.wrapper .content {
text-align: center;
width: 50px;
height: 50px;
line-height: 50px;
background-color: #f88;
color: #fff;
border: 1px solid #88f;
box-sizing: border-box;
}
.content:first-of-type {
order: -1;
}
.content:nth-of-type(2) {
order: -2;
}
.content:last-of-type {
order: -3;
}
</style>
</head>
<body>
<div class="wrapper">
<div class="content">1</div>
<div class="content">2</div>
<div class="content">3</div>
</div>
</body>
</html>
結果
2.aligh-self
設定子項沿交叉軸的對齊方式
【例2】分别改變圖2-1中第一個子項和第三個子項的對齊方式為flex-start和flex-end
圖2-1
css代碼
.wrapper {
margin: 20px;
width: 150px;
height: 150px;
border: 1px solid #424242;
display: flex;
align-items: center;
}
.wrapper .content {
text-align: center;
width: 50px;
height: 50px;
line-height: 50px;
background-color: #f88;
color: #fff;
border: 1px solid #88f;
box-sizing: border-box;
}
.content:first-of-type {
align-self: flex-start;
}
.content:last-of-type {
align-self: flex-end;
}
結果
3.flex-grow
當主軸方向上有剩餘空間時，如圖2-1，使用公式3-1去給每個子項配置設定剩餘空間，其中i表示子項的總數，n表示第k個子項的flex-grow屬性值（下面簡稱占幾份），c表示剩餘空間的像素值，x表示給第k個元素配置設定的像素值
公式3-1
【例3】将圖3-1中的剩餘空間分成五份，第一個子項占一份，第二個子項占一份，第三個子項占三份
圖3-1
代碼：将【例1】中的樣式修改如下
.wrapper {
margin: 20px;
width: 300px;
height: 100px;
border: 1px solid #424242;
display: flex;
}
.wrapper .content {
text-align: center;
width: 50px;
height: 50px;
line-height: 50px;
background-color: #f88;
color: #fff;
border: 1px solid #88f;
box-sizing: border-box;
}
.content:first-of-type {
flex-grow: 1;
}
.content:nth-of-type(2) {
flex-grow: 1;
}
.content:last-of-type {
flex-grow: 3;
}
結果子項1寬度 = 50 + [1 / (1 + 1 + 3)] * 150 = 80px，其他子項計算同理
4.flex-basis
當所有子項的flex-basis屬性值之和小于盒子的寬度時，flex-basis的屬性值會覆寫width的屬性值，此時在計算盒子伸縮時以flex-basis為基準
【例4】
.wrapper {
margin: 20px;
width: 300px;
height: 100px;
border: 1px solid #424242;
display: flex;
}
.wrapper .content {
text-align: center;
flex-basis: 60px;
width: 50px;
height: 50px;
line-height: 50px;
background-color: #f88;
color: #fff;
border: 1px solid #88f;
box-sizing: border-box;
}
.content:first-of-type {
flex-grow: 1;
}
.content:nth-of-type(2) {
flex-grow: 1;
}
.content:last-of-type {
flex-grow: 2;
}
結果，如第一個子項的寬度 = 60 + ( 1 / (1 + 1 + 2) ) * 120 = 90px
【注】flex-basis擴充——當子項中有不換行的文本且文本長度超出盒子的flex-basis值
1.flex-basis與width配合使用（文本内容可以撐開子項的寬度）
（1）當隻有flex-basis或者flex-basis值大于width時，，其屬性值決定了子項的最小寬度
（2）當flex-basis的值小于width時，flex-basis的值為子項的最小寬度，width的值決定了子項的最大寬度
2.flex-basis與flex-shrink配合使用
擁有超出flex-basis的子項不參與壓縮計算，即将其flex-shrink值轉為0；
5.flex-shrink
當主軸方向上子項的寬度和大于盒子寬度時，使用公式5-1去壓縮子項，其中i表示子項的總數，L表示第k個子項的内容區的寬度，n表示第k個子項的flex-shrink屬性值（下面簡稱占幾份），c表示超出盒子的像素值，x表示第k個元素壓縮的像素值
公式5-1
【例】
.wrapper {
margin: 20px;
width: 300px;
height: 100px;
border: 1px solid #424242;
display: flex;
}
.wrapper .content {
text-align: center;
width: 200px;
height: 50px;
line-height: 50px;
color: #fff;
box-sizing: border-box;
flex-shrink: 1;
}
.content:first-of-type {
background-color: #f88;
flex-shrink: 2;
}
.content:nth-of-type(2) {
background-color: #f8f;
width: 400px;
flex-shrink: 2;
}
.content:last-of-type {
background-color: #88f;
width: 600px;
flex-shrink: 3;
}
結果