CSS3的弹性盒子flex详解（2）
上篇講了彈性盒子中盒子的一些屬性，這篇講子項的屬性
目錄
1.order
2.aligh-self
3.flex-grow
4.flex-basis
5.flex-shrink
1.order
設置或檢索彈性盒子子項出現的順序，默認值為0，按數值大小由小到大排列
【例1】使用order將下列子項逆序
【代碼】
<!DOCTYPE html> <html lang="en"> <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-1css代碼
.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; }結果
?
總結
以上是生活随笔為你收集整理的CSS3的弹性盒子flex详解（2）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3的弹性盒子flex详解（1）
- 下一篇： CSS3过渡属性transition详解