站長資訊網本篇文章帶大家了解一下CSS3中的Flex布局，希望對大家有所幫助！
前端（vue）入門到精通課程：進入學習
Apipost = Postman + Swagger + Mock + Jmeter 超好用的API調試工具：點擊使用
簡介
什么是Flex布局
Flex是Flexible Box 的縮寫，也稱為彈性盒子布局。
Flex布局組成：
- flex容器（
flex container） - flex項（
flex items） - 主軸（
main axis） - 交叉軸（
cross axis）
Flex布局的作用
在flex布局未出現前，網頁布局的方式為標準流，浮動，定位等。在解決比較復雜的問題相對麻煩?！緦W習視頻分享：css視頻教程、web前端】
而flex布局可以：
- 自動彈性伸縮
- 更輕松地設計靈活的響應式布局結構
- 精確靈活控制塊級盒子的布局方式
- 在pc端和移動端都適用
Flex容器（父元素）屬性
在使用flex布局之前首先定義 Flex 容器。
display:flex;
登錄后復制
定義 Flex 容器后可以使用相應的屬性， 改變子元素的布局方式，讓子元素可以自動的擠壓或拉伸。
相應屬性：
1. justify-content 主軸元素對齊方式 2. align-items 交叉軸元素對齊方式 3. flex-direction 設置主軸方向 4. flex-wrap 主軸一行滿了換行 5. align-content 交叉軸行對齊方式 6. flex-flow 同時設置 flex-direction和 flex-wrap屬性
登錄后復制
1. justify-content
容器的justify-content屬性可以設置子元素在主軸方向的對齊方式。（記得先display:flex;定義容器）
justify-content: center;//居中對齊
登錄后復制
justify-content: space-between;//間距在子元素之間
登錄后復制
justify-content: space-evenly;//主軸方向所有地方的間距都相等
登錄后復制
justify-content: space-around;//間距加在子元素的兩側（中間大的是兩個子元素的加在一起）
登錄后復制
代碼：
<!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; /* 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屬性可以設置子元素在交叉軸方向的對齊方式。
由此我們可以設置將容器屬性justify-content和 align-items 設置為居中，讓元素實現完美居中。
align-items: center;//居中
登錄后復制
align-items: stretch;//拉伸,默認值(現有狀態,這里測試去掉子級的高度)
登錄后復制
align-items: flex-start;//將子元素在容器頂部對齊
登錄后復制
align-items: flex-end;//將子元素在容器底部對齊
登錄后復制
代碼：
<!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; } .father { display: flex; /* 居中 */ /* align-items: center; */ /* 拉伸,默認值(現有狀態,測試的時候去掉子級的高度) */ /* align-items: stretch; */ /* align-items: flex-start; */ align-items: flex-end; height: 300px; margin: auto; border: 1px solid #000; } .father div { /* 如果不設置寬，由內容撐開 */ 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主軸方向默認為水平向右方向。如果修改主軸方向，那么交叉軸方向也會與之改變。
flex-direction: column;//主軸方向為垂直方向（從上到下）
登錄后復制
flex-direction: column-reverse;//主軸方向為垂直方向（從下到上）
登錄后復制
flex-direction: row;//主軸方向為水平方向（從左到右）
登錄后復制
flex-direction: row-reverse;//主軸方向為水平方向（從右到左）
登錄后復制
修改主軸方向后實現垂直居中：
display:flex; flex-direction: column; justify-content: center;
登錄后復制
4. flex-wrap
當定義flex容器之后，如果子元素過多超出主軸方向寬度，容器內的子元素會自動伸縮。
如：
<!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>
登錄后復制
解決：容器的flex-wrap屬性可以讓超出容器主軸方向的子元素換行顯示。
flex-wrap: nowrap;//默認值，不換行 flex-wrap: wrap;//換行，從上到下
登錄后復制
flex-wrap: wrap-reverse;//換行，從下到上
登錄后復制
5. align-content
容器的align-content屬性可以調節子元素行的對齊方式（需要先設置換行之后）。
align-content: center;//居中對齊 align-content: space-around;//間距加在子元素的兩側（中間大的是兩個子元素的加在一起） align-content: space-between;//間距在子元素之間
登錄后復制
前三者的屬性跟主軸對齊方式一樣就不再贅述。
align-content: stretch;拉伸,默認值(現有狀態,這里測試去掉子級的高度)
登錄后復制
6.flex-flow
flex-flow屬性是用于同時設置 flex-direction 和 flex-wrap 屬性的簡寫屬性。
flex-flow: row wrap;
登錄后復制
Flex項（子元素）屬性
我們可以設置相應屬性讓flex 容器的直接子元素成為彈性（flex）項目。（在使用flex布局之前首先定義 Flex 容器。）
相應屬性：
1. flex-grow 2. flex-shrink 3. flex-basis 4. flex 5. align-self 6. order
登錄后復制
1. flex-grow
使用flex-grow屬性來定義彈性盒子內部子元素的放大比例（當所有子元素寬度之和小于父元素的寬度時子元素如何分配父元素的剩余空間）。
<!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{ /* 沒有設置寬度 */ 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>
登錄后復制
2. flex-shrink
使用flex-shrink屬性來定義彈性盒子內部子元素的縮小比例（當所有子元素寬度之和大于父元素的寬度時子元素如何縮小自己的寬度）。
<!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>
登錄后復制
3. flex-basis
使用flex-basis屬性來設置子元素的寬度，默認值為auto（作用跟width一樣,優先級比width高，就算width在后面也會顯示flex-basis）。
4. flex
使用flex屬性來同時設置flex-grow、flex-shrink、flex-basis這3個屬性，flex屬性就是一個復合屬性。
實際應用一般用復合屬性。
語法：
flex: grow shrink basis;//順序不能改變,默認值為0 1 auto;
登錄后復制
5. align-self
使用align-self屬性設置子元素項目的對齊方式。
注意：align-self屬性會覆蓋容器的 align-items 屬性所設置的對齊方式。
<!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>
登錄后復制
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>
登錄后復制
