Flex是Flexible Box 的縮寫，也稱為彈性盒子布局。 Flex布局組成：
(相關資料圖)
flex container）flex項（flex items）主軸（main axis）交叉軸（cross axis）在flex布局未出現前，網頁布局的方式為標準流，浮動，定位等。在解決比較復雜的問題相對麻煩?！緦W習視頻分享：css視頻教程、web前端】
而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屬性
容器的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>容器的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>容器的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;
當定義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;//換行，從下到上
容器的align-content屬性可以調節子元素行的對齊方式（需要先設置換行之后）。
align-content: center;//居中對齊align-content: space-around;//間距加在子元素的兩側（中間大的是兩個子元素的加在一起）align-content: space-between;//間距在子元素之間
前三者的屬性跟主軸對齊方式一樣就不再贅述。
align-content: stretch;拉伸,默認值(現有狀態,這里測試去掉子級的高度)
flex-flow屬性是用于同時設置 flex-direction和 flex-wrap屬性的簡寫屬性。
flex-flow: row wrap;
我們可以設置相應屬性讓flex 容器的直接子元素成為彈性（flex）項目。（在使用flex布局之前首先定義 Flex 容器。）
相應屬性：
1. flex-grow2. flex-shrink3. flex-basis4. flex5. align-self6. order
使用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>使用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>使用flex-basis屬性來設置子元素的寬度，默認值為auto（作用跟width一樣,優先級比width高，就算width在后面也會顯示flex-basis）。
使用flex屬性來同時設置flex-grow、flex-shrink、flex-basis這3個屬性，flex屬性就是一個復合屬性。 實際應用一般用復合屬性。 語法：
flex: grow shrink basis;//順序不能改變,默認值為0 1 auto;
使用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>使用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>更多編程相關知識，請訪問：編程視頻??！
以上就是一文詳解CSS3中的Flex布局的詳細內容，更多請關注php中文網其它相關文章！
營業執照公示信息