站長(zhǎng)資訊網(wǎng)本篇文章帶大家了解一下CSS3中的Flex布局，希望對(duì)大家有所幫助！
前端（vue）入門到精通課程：進(jìn)入學(xué)習(xí)
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調(diào)試工具：點(diǎn)擊使用
簡(jiǎn)介
什么是Flex布局
Flex是Flexible Box 的縮寫，也稱為彈性盒子布局。
Flex布局組成：
- flex容器（
flex container） - flex項(xiàng)（
flex items） - 主軸（
main axis） - 交叉軸（
cross axis）
Flex布局的作用
在flex布局未出現(xiàn)前，網(wǎng)頁布局的方式為標(biāo)準(zhǔn)流，浮動(dòng)，定位等。在解決比較復(fù)雜的問題相對(duì)麻煩?！緦W(xué)習(xí)視頻分享：css視頻教程、web前端】
而flex布局可以：
- 自動(dòng)彈性伸縮
- 更輕松地設(shè)計(jì)靈活的響應(yīng)式布局結(jié)構(gòu)
- 精確靈活控制塊級(jí)盒子的布局方式
- 在pc端和移動(dòng)端都適用
Flex容器（父元素）屬性
在使用flex布局之前首先定義 Flex 容器。
display:flex;
定義 Flex 容器后可以使用相應(yīng)的屬性， 改變子元素的布局方式，讓子元素可以自動(dòng)的擠壓或拉伸。
相應(yīng)屬性：
1. justify-content 主軸元素對(duì)齊方式 2. align-items 交叉軸元素對(duì)齊方式 3. flex-direction 設(shè)置主軸方向 4. flex-wrap 主軸一行滿了換行 5. align-content 交叉軸行對(duì)齊方式 6. flex-flow 同時(shí)設(shè)置 flex-direction和 flex-wrap屬性
1. justify-content
容器的justify-content屬性可以設(shè)置子元素在主軸方向的對(duì)齊方式。（記得先display:flex;定義容器）
justify-content: center;//居中對(duì)齊
justify-content: space-between;//間距在子元素之間
justify-content: space-evenly;//主軸方向所有地方的間距都相等
justify-content: space-around;//間距加在子元素的兩側(cè)（中間大的是兩個(gè)子元素的加在一起）
代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>主軸對(duì)齊方式</title> <style> * { margin: 0; padding: 0; } .box { display: flex; /* justify-content: center; */ /* justify-content: space-between; */ /* justify-content: space-evenly; */ justify-content: space-around; height: 200px; margin: auto; border: 1px solid #000; } .box div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
2. align-items
容器的align-items屬性可以設(shè)置子元素在交叉軸方向的對(duì)齊方式。
由此我們可以設(shè)置將容器屬性justify-content和 align-items 設(shè)置為居中，讓元素實(shí)現(xiàn)完美居中。
align-items: center;//居中
align-items: stretch;//拉伸,默認(rèn)值(現(xiàn)有狀態(tài),這里測(cè)試去掉子級(jí)的高度)
align-items: flex-start;//將子元素在容器頂部對(duì)齊
align-items: flex-end;//將子元素在容器底部對(duì)齊
代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>交叉軸對(duì)齊方式</title> <style> * { margin: 0; padding: 0; } .father { display: flex; /* 居中 */ /* align-items: center; */ /* 拉伸,默認(rèn)值(現(xiàn)有狀態(tài),測(cè)試的時(shí)候去掉子級(jí)的高度) */ /* align-items: stretch; */ /* align-items: flex-start; */ align-items: flex-end; height: 300px; margin: auto; border: 1px solid #000; } .father div { /* 如果不設(shè)置寬，由內(nèi)容撐開 */ width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>
3. flex-direction
容器的flex-direction屬性可以改變flex布局的主軸方向。flex主軸方向默認(rèn)為水平向右方向。如果修改主軸方向，那么交叉軸方向也會(huì)與之改變。
flex-direction: column;//主軸方向?yàn)榇怪狈较颍◤纳系较拢?/pre>登錄后復(fù)制
flex-direction: column-reverse;//主軸方向?yàn)榇怪狈较颍◤南碌缴希?/pre>登錄后復(fù)制
flex-direction: row;//主軸方向?yàn)樗椒较颍◤淖蟮接遥?/pre>登錄后復(fù)制
flex-direction: row-reverse;//主軸方向?yàn)樗椒较颍◤挠业阶螅?/pre>登錄后復(fù)制
修改主軸方向后實(shí)現(xiàn)垂直居中：
display:flex; flex-direction: column; justify-content: center;登錄后復(fù)制
4. flex-wrap
當(dāng)定義
flex容器之后，如果子元素過多超出主軸方向?qū)挾?，容器?nèi)的子元素會(huì)自動(dòng)伸縮。
如：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>彈性盒子換行</title> <style> * { margin: 0; padding: 0; } .box { display: flex; height: 500px; border: 1px solid #000; } .box div { width: 100px; height: 100px; background-color: pink; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> <div>4</div> <div>5</div> <div>6</div> <div>7</div> <div>8</div> <div>9</div> </div> </body> </html>登錄后復(fù)制
解決：容器的flex-wrap屬性可以讓超出容器主軸方向的子元素?fù)Q行顯示。
flex-wrap: nowrap;//默認(rèn)值，不換行 flex-wrap: wrap;//換行，從上到下登錄后復(fù)制
flex-wrap: wrap-reverse;//換行，從下到上登錄后復(fù)制
5. align-content
容器的
align-content屬性可以調(diào)節(jié)子元素行的對(duì)齊方式（需要先設(shè)置換行之后）。
align-content: center;//居中對(duì)齊 align-content: space-around;//間距加在子元素的兩側(cè)（中間大的是兩個(gè)子元素的加在一起） align-content: space-between;//間距在子元素之間登錄后復(fù)制前三者的屬性跟主軸對(duì)齊方式一樣就不再贅述。
align-content: stretch;拉伸,默認(rèn)值(現(xiàn)有狀態(tài),這里測(cè)試去掉子級(jí)的高度)登錄后復(fù)制
6.flex-flow
flex-flow屬性是用于同時(shí)設(shè)置flex-direction和flex-wrap屬性的簡(jiǎn)寫屬性。
flex-flow: row wrap;登錄后復(fù)制Flex項(xiàng)（子元素）屬性
我們可以設(shè)置相應(yīng)屬性讓flex 容器的直接子元素成為彈性（flex）項(xiàng)目。（在使用flex布局之前首先定義 Flex 容器。）
相應(yīng)屬性：
1. flex-grow 2. flex-shrink 3. flex-basis 4. flex 5. align-self 6. order登錄后復(fù)制1. flex-grow
使用
flex-grow屬性來定義彈性盒子內(nèi)部子元素的放大比例（當(dāng)所有子元素寬度之和小于父元素的寬度時(shí)子元素如何分配父元素的剩余空間）。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; } .box1{ /* 沒有設(shè)置寬度 */ background:red; flex-grow: 1; } .box2{ background:blue; flex-grow: 2; } .box3{ background:orange; flex-grow: 1; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body> </html>登錄后復(fù)制
2. flex-shrink
使用
flex-shrink屬性來定義彈性盒子內(nèi)部子元素的縮小比例（當(dāng)所有子元素寬度之和大于父元素的寬度時(shí)子元素如何縮小自己的寬度）。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; } .box1{ width: 100px; background:red; flex-shrink: 1; } .box2{ width: 100px; background:blue; flex-shrink: 2; } .box3{ width: 100px; background:orange; flex-shrink: 1; } </style> </head> <body> <div> <div></div> <div></div> <div></div> </div> </body> </html>登錄后復(fù)制
3. flex-basis
使用
flex-basis屬性來設(shè)置子元素的寬度，默認(rèn)值為auto（作用跟width一樣,優(yōu)先級(jí)比width高，就算width在后面也會(huì)顯示flex-basis）。4. flex
使用flex屬性來同時(shí)設(shè)置flex-grow、flex-shrink、flex-basis這3個(gè)屬性，flex屬性就是一個(gè)復(fù)合屬性。
實(shí)際應(yīng)用一般用復(fù)合屬性。
語法：
flex: grow shrink basis;//順序不能改變,默認(rèn)值為0 1 auto;登錄后復(fù)制5. align-self
使用
align-self屬性設(shè)置子元素項(xiàng)目的對(duì)齊方式。注意：
align-self屬性會(huì)覆蓋容器的align-items屬性所設(shè)置的對(duì)齊方式。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; align-items: center; border: 1px solid #000; } .box1{ width: 100px; height: 50px; background:red; align-self: flex-start; } .box2{ width: 100px; height: 50px; background:blue; } .box3{ width: 100px; height: 50px; background:orange; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>登錄后復(fù)制
6. order
使用
order屬性來定義子元素的排列順序。
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> .father{ display:flex; width:200px; height:150px; } .box1{ width: 100px; background:red; order: 2; } .box2{ width: 100px; background:blue; order: 1; } .box3{ width: 100px; background:orange; order: 3; } </style> </head> <body> <div> <div>1</div> <div>2</div> <div>3</div> </div> </body> </html>登錄后復(fù)制
