flex布局學習筆記

布局的傳統解決方案，基於盒狀模型，依賴display屬性 +position屬性 +float屬性。它對於那些特殊布局非常不方便，比如，垂直居中就不容易實現。新的方案—-flex 布局，可以簡便、完整、響應式地實現各種頁面布局

flex(flexible box)的縮寫，彈性布局，任何乙個容器都可以指定為flex布局，webkit 核心的瀏覽器，必須加上-webkit字首，但是設定為flex布局的時候，子元素的float、clear、vertical-align屬性將失效

採用flex布局的元素，稱為「flex容器」，其子元素自動成為容器成員，稱為flex專案

容器擁有六個屬性：flex-direction，flex-wrap，flex-flow，justify-content，align-items，align-content##

決定專案的排列順序

flex-direction: row | row-reverse | column | column-reverse;

row預設值，主軸為水平方向，起點在左端

預設情況下，專案排列在一條軸線上，flex-wrap屬性定義的是如果一條軸線排不下，如何換行

flex-wrap: nowrap | wrap | wrap-reverse;

是前面兩個屬性flex-direction與flex-wrap屬性的簡寫形式，預設值為row nowrap

flex-flow:  || ;

定義了專案在主軸上的對齊方式

justify-content: flex-start | flex-end | center | space-between | space-around;

定義專案在交叉軸上如何對齊

取5個值。具體的對齊方式與交叉軸的方向有關

定義了多根軸線的對其方式，如果專案只有一根軸線，該屬性不起作用

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

定義專案的排列順序，數值越小，排列越靠前，預設為0

order: ;

flex-grow屬性定義專案的放大比例，預設為0，即如果存在剩餘空間，也不放大

flex-grow: ; /* default 0 */

如果所有專案的flex-grow屬性都為1，則它們將等分剩餘空間（如果有的話）。如果乙個專案的flex-grow屬性為2，其他專案都為1，則前者佔據的剩餘空間將比其他項多一倍

定義了專案的縮小比例，預設為1，如空間不足，該專案將被放大

flex-shrink: ; /* default 1 */

定義了在分配多餘空間之前，專案佔據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多餘空間。它的預設值為auto，即專案的本來大小

flex-basis:  | auto; /* default auto */

當設定固定值時，如100px，則專案將佔據固定空間

flex屬性是flex-grow、flex-shrink、flex-basis的簡寫，預設為0，1， auto，後兩個屬性可選

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]

快捷值：auto（1 1 auto）和 none（0 0 auto）

允許單個專案有與其他專案不一樣的對齊方式，可覆蓋align-items屬性，預設值為auto，表示繼承父元素的align-items的屬性，如果沒有父元素，則等同於stretch

align-self: auto | flex-start | flex-end | center | baseline | stretch;