學習css的flex屬性使用方法前要先了解flex 有主軸和副軸的概念。
主軸默認就是x軸，副軸默認是y軸。但是主軸和父軸是可以設置的。
一、先了解 display:flex; 添加彈性盒子 和 flex-direction 設置x軸或y軸哪個是主軸的屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width: 900px; height: 400px; background-color: pink; /*給父級添加 flex 屬性，彈性盒子*/ display:flex; /*彈性盒子的默認值 x軸排列*/ /*flex-direction: row;*/ /*x軸翻轉*/ /*flex-direction: row-reverse;*/ /*把主軸設為Y軸*/ /*flex-direction: column;*/ /*y軸翻轉*/ /*flex-direction: column-reverse;*/ } span{ width: 100px; height: 100px; background-color: lawngreen; } </style> </head> <body> <div id=""> <span> 1 </span> <span> 2 </span> <span> 3 </span> </div> </body> </html>
以前我們要把span的左右排列，需要給元素加浮動，現在只需要在父容器加一個 display:flex; 即可，因為默認加了 flex-direction: row 屬性。
要想豎着排列父容器加 flex-direction: column 這樣就可以把主軸就是y軸了。
二、設置好了主軸，我們還可以設置對齊方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width: 900px; height: 400px; background-color: pink; /*給父級添加 flex 屬性，彈性盒子*/ display:flex; /*默認主軸左對齊*/ /*justify-content: flex-start;*/ /*justify-content: flex-end;*/ /*justify-content: center;*/ /*平分剩余空間*/ /*justify-content: space-around;*/ /*先兩邊貼邊再平分剩余空間*/ justify-content: space-between; /*換行 默認不換行*/ /*flex-wrap: wrap;*/ /*設置側軸對齊方式*/ align-items: center; } span{ width: 200px; height: 100px; background-color: lawngreen; } </style> </head> <body> <div id=""> <span> 1 </span> <span> 2 </span> <span> 3 </span> <span> 4 </span> </div> </body> </html>
其中 justify-content 屬性就是設置主軸的對齊方式 ， align-items 設置副軸的對齊方式 案列中舉例了一些常用的對齊方法
注意** 彈性盒子默認是不換行的，如果小盒子的個數很多加起來寬度大於主盒子，彈性盒子還是在主軸上，就是小盒子寬度會強行變小。但是我們可以加 flex-wrap: wrap 讓小盒子換行。
三、小盒子 flex 分配剩余空間
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width: 900px; height: 600px; background-color: pink; display:flex; } span{ /*width: 200px; height: 100px;*/ background-color: lawngreen; /*定義子項目分配剩余空間*/ flex: 1; margin: 1%; } span:nth-child(2){ flex: 2; background-color: burlywood; } </style> </head> <body> <div id=""> <span> 2 </span> <span> 3 </span> <span> 4 </span> </div> </body> </html>
我們直接給小盒子加flex設置他所占的分數，這樣寬高就會自動幫我們設置好來。以上的例子給第二的盒子2份，第一、第三各一份，加起來一共有四份。
我們可以這樣理解，把大div寬高切割了一共四份，這樣就有了以上的效果了。不用去設置寬高，只需設置份數就可以了，完美結局了不同屏幕的兼容問題。
四、align-content 多行排列問題
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width: 900px; height: 600px; background-color: pink; display:flex; flex-wrap: wrap; justify-content: space-around; /*只適用於換行情況*/ align-content: space-around; } span{ width: 200px; height: 100px; background-color: lawngreen; } </style> </head> <body> <div id=""> <span> 1 </span> <span> 2 </span> <span> 3 </span> <span> 4 </span> <span> 1 </span> <span> 2 </span> <span> 3 </span> <span> 4 </span> <span> 1 </span> <span> 2 </span> <span> 3 </span> <span> 4 </span> </div> </body> </html>
解決主軸副軸都對齊方法。在進行多個盒子排列的時候，先加換行flex-wrap: wrap;，然后設置副軸對齊方法 align-content 。
五、給單獨一個小盒子加一些屬性
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> div{ width: 900px; height: 400px; background-color: pink; /*給父級添加 flex 屬性，彈性盒子*/ display:flex; justify-content: space-around; } span{ width: 100px; height: 100px; background-color: lawngreen; } span:nth-child(2){ /*給某個子元素單獨在側軸加對齊方式*/ align-self: flex-end; /*控制排列順序，越大越靠后*/ order: -1; } </style> </head> <body> <div id=""> <span> 1 </span> <span> 2 </span> <span> 3 </span> </div> </body> </html>
單獨給某個子元素單獨在側軸加對齊方式 align-self: flex-end;。原來的位置還在那
控制排列順序，越大越靠后 order: -1;。默認值是0.注意和z-index 不一樣的。order只是對排列順序設置