CSS之Flex佈局

佈局的傳統解決方案，基於盒子模型，依賴display屬性+position屬性+float屬性。對於那些特殊佈局很是不方便。

是什麼

Flex佈局，意思是彈性佈局，用來爲盒子模型提供最大的靈活性。
任何一個容器均可以指定爲Flex佈局。

注意

1. WebKit內核的瀏覽器，必須加上-webkit前綴。

display: -webkit-flex
複製代碼

2. 設置爲Flex佈局以後，子元素的flaot，clear和vertical-align屬性將失效。

基本概念

Flex容器/項目

採用Flex佈局的元素，稱爲Flex容器。簡稱容器，它的全部子元素自動成爲容器成員，成爲Flex項目。

Flex主軸/交叉軸

容器默認存在兩跟軸。水平方向稱爲主軸，垂直方向稱爲交叉軸。
項目默認沿主軸排布。

Flex容器屬性

共有6個屬性，以下：

1. flex-direction
2. flex-wrap
3. flex-flow
4. justify-content
5. align-items
6. align-content

flex-direction

該屬性決定主軸的方向。
值： row/column/ reverse-row/reverse-column
默認值爲： row主軸爲水平方向，起點在左邊。

flex-wrap

默認狀況下，項目都排在一條軸線上。該屬性定義，若是一個軸線排列不下，是否換行。
值: nowrap/wrap/wrap-reverse（換行，第一行在下面)
默認值爲 nowrap 表示不換行

flex-flow

flex-flow是flex-direction和flex-wrap的簡寫模式。默認值爲 row nowrap。
可是不常見，仍是分開寫。

justify-content

定義了項目在主軸上的對齊方式。
值： flex-start/center/flex-end/space-between/space-around
默認值是：flex-start 左對齊
注意： 
space-between 表示 兩端對齊，項目之間的間隔都相等（項目與左右邊距沒有距離） 記憶方法 between 表示項目間距離
space-around  每一個項目兩側的距離相等（項目到左右邊距的距離爲項目間距離的一半）記憶方法 around表示項目周圍，包括項目與左右邊界的距離

align-items

定義項目在交叉軸上如何對齊。
默認值: stretch
值爲：

• flex-start  交叉軸起點對齊
• center 中點對齊
• flex-end 終點對齊
• stretch 默認值 若是項目未設置高度，將佔滿整個容器的高度。
• baseline 第一行的文字基線對齊。

align-content

定義了多根軸線的對齊方式，若是隻有一個軸線，則不起做用。
默認值： stretch
值：

• flex-start 與交叉軸的起點對齊
• flex-end 與交叉軸的終點對齊
• center 與交叉軸的中點對齊
• space-between 與交叉軸兩段對齊，軸線之間的間隔平均分佈（與交叉軸 之間沒有距離）
• space-around 每根軸線兩側的距離都相等（與交叉軸 之間有距離）

Flex項目屬性

項目屬性共有6個：

1. order
2. flex-grow
3. flex-shrink
4. flex-basis
5. flex
6. aign-self

order

定義項目的排列順序。數值越小，排列越靠前。
默認爲0。

flex-grow 放大比例 0

定義項目的放大比例。默認爲0，表示不放大，即若是存在剩餘空間，也不放大。
若是其餘項目的flex-grow屬性都爲1，則它們將等分剩餘空間。
若是有的項目的flex-grow屬性不一樣，則會按比例分配空間。

flex-shrink 縮小比例 1

定義項目的縮小比例。默認爲1，即若是空間不足，該項目會縮小。
若是全部項目的flex-shrink屬性都爲1，那麼當空間不足時，都將等比例縮小（默認狀況下，或縮小）
若是一個項目的flex-shrink屬性爲0，那麼當空間不足時，其餘項目縮小，該項目不縮小。
負值對該屬性無效。

flex-basis 固定空間 auto

（須要再理解）
定義了在分配多餘空間之間，項目佔據的主軸空間。 瀏覽器根據這個屬性，來計算主軸是否還有剩餘空間。
默認值爲auto，表示項目的原來大小。

.item {
	flex-basis:<length>/auto
}
複製代碼

能夠設定和寬度高度同樣的值，則項目將佔據固定空間。

flex

flex屬性是 flex-grow，flex-shrink，flex-basis三個屬性的縮寫形式。
默認值是 0，1，auto
還有兩個快捷值，auto（1，1，auto） none（0，0，auto）
建議優先使用這個屬性。

flex取值問題

1. flex 取值爲auto  flex-grow 爲 1 ，flex-shrink 1 flex-basis 爲auto（表示自動縮放）
2. flex取值爲none flex-grow 爲  0，flex-shrink 0 flex-basis 爲auto
3. flex取值爲一個非負數字 這個數字爲flex-grow的值，flex-shrink爲 1 flex-basis 取 0 %（ 設置 flex-grow的值，會自動縮小）
4. 當flex取值爲一個長度或者百分比 設置 flex-basis的值，flex-grow爲1  flex-shrink爲1 （表示自動縮放）
5. 當flex取值爲兩個非負數字 這兩個數字 flex-grow 和flex-shrink的值。

flex： 1 表明什麼？

align-self

align-self屬性容許單個項目與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值是auto。表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。