CSS3的弹性盒子flex详解（1）
彈性盒子的屬性分為盒子的屬性和子項的屬性，先介紹盒子的屬性吧，子項的屬性下一篇講
目錄
1.dislay
2.flex-direction
3.flex-wrap
4.align-items
5.?justify-content
6.align-content
1.dislay
表示盒子為彈性盒子的屬性值有flex，inline-flex
（1）flex：該彈性盒子為塊元素，如【例1-1】
（2）inline-flex：該彈性盒子為行級塊元素。如【例1-2】
【例1-1】flex
效果
?代碼
<!DOCTYPE html> <html lang="en"> <head><style>* {margin: 0;padding: 0;}.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;border: 1px solid #88f;box-sizing: border-box;}</style> </head> <body><div class="wrapper"><div class="content">1</div><div class="content">2</div><div class="content">3</div></div><a href="">flex</a> </body> </html> </html>【例1-2】inline-flex：上例代碼中display屬性值修改為inline-flex，a標簽文本內容修改為inline-flex，結果如下
2.flex-direction
該屬性可設置主軸的方向，交叉軸與主軸垂直，屬性值有row，row-reverse，column，column-reverse
【注】主軸方向確定了子項的排列方向
（1）row（默認值）：主軸水平，方向從左向右【例2-1】
（2）row-reverse：主軸水平，方向從右向左【例2-2】
（3）column：主軸垂直，方向從上到下【例2-3】
（4）column-reverse：主軸垂直，方向從下到上【例2-4】
【例2-1】給【例1-1】中wrapper的樣式中添加屬性flex-direction: row，且刪除a標簽，CSS代碼如下
.wrapper {margin: 20px;width: 300px;height: 150px;border: 1px solid #424242;display: flex;flex-direction: row; }結果
row【例2-2】將上例中flex-direction屬性值設為row-reverse，結果如下
row-reverse【例2-3】將上例中flex-direction屬性值設為column，結果如下
column【例2-4】將上例中flex-direction屬性值設為column-reverse，結果如下
column-reverse3.flex-wrap
該屬性可以設置flex盒子是多行還是單行，有三個屬性值nowrap，wrap，?wrap-reverse
（1）nowrap（默認值）：單行，且對子項的寬度進行壓縮【例3-1】
（2）wrap：折成多行【例3-2】
（3）wrap-reverse：反轉wrap排列，注意反轉的效果【例3-3】
【例3-1】將例【2-1】中wrapper的樣式修改如下css代碼，并添加兩個content如下html代碼
html代碼
<div class="wrapper"><div class="content">1</div><div class="content">2</div><div class="content">3</div><div class="content">4</div><div class="content">5</div> </div>css代碼?
.wrapper {margin: 20px;width: 150px;height: 150px;border: 1px solid #424242;display: inline-flex;flex-wrap: nowrap; }結果
nowrap?【例3-2】將上例中flex-wrap的屬性值設置為wrap，結果如下
wrap??【例3-3】將上例中flex-wrap的屬性值設置為wrap-reverse，結果如下
wrap-reverse4.align-items
設置交叉軸上的的對齊方式，五個屬性值flex-start，flex-end，center，baseline，stretch?
（1）flex-start（默認）：子項在彈性盒子交叉軸的起始位置【例4-1】
（2）flex-end：子項在彈性盒子交叉軸的終止位置【例4-2】
（3）center：子項在交叉軸的中間位置【例4-3】
（4）baseline：子項相對于文本對齊【例4-4】
（5）stretch（默認值）：當子項沒有在交叉軸上設置高?/ 寬（主軸水平 / 主軸垂直）時，該屬性值可以在使子項的高?/ 寬拉伸至充滿盒子，如【例4-5】
【例4-1】flex-start
代碼
<!DOCTYPE html> <html lang="en"> <head><style> .wrapper {margin: 20px;width: 150px;height: 150px;border: 1px solid #424242;display: flex;align-items: flex-start; } .wrapper .content {text-align: center;width: 50px;height: 50px;line-height: 50px;background-color: #f88;border: 1px solid #88f;box-sizing: border-box; }</style> </head> <body><div class="wrapper"><div class="content">1</div><div class="content">2</div><div class="content">3</div></div> </body> </html>結果
flex-start【例4-2】flex-end：將上例align-items的屬性值設置為flex-end，結果如下
flex-end?【例4-3】center：將上例align-items的屬性值設置為center，結果如下
center?【例4-4】baseline：修改上例html代碼中第一個content如下
<div class="content" style="margin-top: 5px;">1</div>刪除align-center屬性，此時結果如下
然后添加align-items: baseline，此時結果如下
baseline【例4-5】刪除【例4-1】中子項content的高度，且將align-items的屬性值設置為stretch，結果如下
stretch5.?justify-content
當彈性盒里一行上的所有子元素都不能伸縮或已經達到其最大值時，這一屬性可協助對多余的空間進行分配。當元素溢出某行時，這一屬性同樣會在對齊上進行控制，有5個屬性值flex-start，flex-end，center，space-between，space-around
（1）flex-start（默認）【例5-1】
（2）flex-end【例5-2】
（3）center【例5-3】
（4）space-between：第一個和最后一個子項分別置于主軸的兩頭，中間部分自適應分配，相鄰子項間隔相等，如【例5-4】
（5）space-around：子項等間隔分布，且子項與子項之間的間隔是第一個或者最后一個子項距離盒子邊的二倍，如【例5-5】
【例5-1】flex-start
<!DOCTYPE html> <html lang="en"> <head><style> .wrapper {margin: 20px;width: 250px;height: 150px;border: 1px solid #424242;display: flex;justify-content: flex-start; } .wrapper .content {text-align: center;width: 50px;height: 50px;line-height: 50px;background-color: #f88;border: 1px solid #88f;box-sizing: border-box; }</style> </head> <body><div class="wrapper"><div class="content">1</div><div class="content">2</div><div class="content">3</div></div> </body> </html>結果
flex-start【例5-2】flex-end，修改上例justify-content屬性值為flex-end，結果如下
flex-end?【例5-3】center，修改上例justify-content屬性值為center，結果如下
?
center?【例5-4】space-between，修改上例justify-content屬性值為space-between，結果如下
space-between?【例5-5】space-around，修改上例justify-content屬性值為space-around，結果如下
space-around?
6.align-content
多行沿交叉軸的對其方向，五個屬性值flex-start，flex-end，center，space-between，space-around，stretch
【例6-1】center
<!DOCTYPE html> <html lang="en"> <head><style> .wrapper {margin: 20px;width: 250px;height: 250px;border: 1px solid #424242;display: flex;flex-wrap: wrap;align-content: center; } .wrapper .content {text-align: center;width: 50px;height: 50px;line-height: 50px;background-color: #f88;border: 1px solid #88f;box-sizing: border-box; }</style> </head> <body><div class="wrapper"><div class="content">1</div><div class="content">2</div><div class="content">3</div><div class="content">4</div><div class="content">5</div><div class="content">6</div><div class="content">7</div><div class="content">8</div><div class="content">9</div><div class="content">10</div></div> </body> </html>結果
center其他屬性不做贅述，可以自己試一試?
總結
以上是生活随笔為你收集整理的CSS3的弹性盒子flex详解（1）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： CSS3属性之resize
- 下一篇： CSS3的弹性盒子flex详解（2）