CSS魔法堂:Flex佈局
阿新 • • 發佈:2019-01-01
前言
Flex是Flexible Box的縮寫,就是「彈性佈局」。從2012年已經面世,但由於工作環境的原因一直沒有詳細瞭解。最近工作忙到頭暈腦脹,是要學點新東西刺激一下大腦,打打雞血。
Flex就這麼簡單
瀏覽器相容性
一說到相容性就是永遠的痛,不過幸運的是隻要在IE10加-ms-
字首就可以用啦^_^
涉及的物件
Flex佈局主要是操作Flex Container 和 Flex Item兩類物件。
Flex Container為作為佈局容器擁有main axis,main start,main end,cross axis,cross start 和 cross end屬性。
- main axis為主軸,預設是水平方向;
- main start為主軸起始位置,預設是主軸和左側邊框的交叉點(Flex Item會從main start和cross start開始排列);
- main end為主軸結束位置,預設是主軸和右側邊框的交叉點;
- cross axis為交叉軸,預設是垂直方向;
- cross start為交叉軸起始位置,預設是交叉軸和上邊框的交叉點;
- cross end為交叉軸結束位置,預設是交叉軸和下邊框的交叉點。
Flex Item則為容器內的孩子元素,擁有main size和cross size屬性。
- main size為Flex Item的主軸方向寬度;
- cross size為Flex Item的交叉軸方向寬度。
玩轉Flex Container
/* 設定Flex Container,為其直接孩子節點建立Flex Context */
display: flex; /* 定義塊級Flex Contianer */
display: inline-flex; /* 定義行級Flex Contianer */
/* 設定main/cross axis方向和main/cross start, main/cross end的位置
* row - 預設值,main axis為水平,main start為主軸和左側邊框的交叉點,main end為主軸和右側邊框的交叉點
* cross axis為垂直,cross start為交叉軸和上邊框的交叉點,cross end為交叉軸和下邊框的交叉點
* row-reverse - main axis為水平,main start為主軸和右側邊框的交叉點,main end為主軸和左側邊框的交叉點
* cross axis為垂直,cross start為交叉軸和上邊框的交叉點,cross end為交叉軸和下邊框的交叉點
* column - main axis為垂直,main start為主軸和上邊框的交叉點,main end為主軸和下邊框的交叉點
* cross axis為水平,cross start為交叉軸和左側邊框的交叉點,cross end為交叉軸和右側邊框的交叉點
* column-reverse - main axis為垂直,main start為主軸和下邊框的交叉點,main end為主軸和上邊框的交叉點
* cross axis為水平,cross start為交叉軸和左側邊框的交叉點,cross end為交叉軸和右側邊框的交叉點
*/
flex-direction: row | row-reverse | column | column-reverse
/* 是否換行
* nowrap - 預設值,打死都不換行
* wrap - 乖乖換行,第一行到最後一行的方向為從 cross start 到 cross end
* wrap-reverse - 乖乖換行,但第一行到最後一行的方向為從 cross end 到 cross start
*/
flex-wrap: nowrap | wrap | wrap-reverse