/*背景 居中 自適應 鋪滿容器*/ background: center / cover;
flex布局是什么?
flex是Flexibe Box 的縮寫,意思為”彈性布局”, 用來為盒子模型提供最大的靈活性;
任何一個容器都可以指定為 flex 布局
注意 : 設為 flex 布局以后,子元素的float clear和vertical-align 屬性將失效
基本概念
采用flex布局的元素,稱為flex容器,它的所有字元素自動成為容器成員 稱為flex項目
容器默認存在兩根軸: 水平的主軸 和 垂直的側軸. 主軸的開始位置(邊框的交叉點)叫做main start,
結束位置叫做main end;側軸的開始位置叫做cross start,結束位置叫做cross end項目默認沿主軸排列.
單個項目占據的主軸空間叫做main size, 占據的側軸空間叫做 cross size;
容器的主要屬性
flex-direction
flex-wrap
justify-content
align-items
align-content
flex-flow
flex-direction屬性決定主軸的方向(即子元素的排列方向)
值: row(默認): 主軸為水平方向,起點在左端
row-reverse : 主軸為水平方向,起點在右端
column : 主軸為垂直方向,起點在上沿
column-reverse : 主軸為垂直方向,起點在下沿
flex-wrap屬性, 默認情況下,子元素都排在一條線(又稱"軸線")上,flex-wrap屬性定義,如果一條軸線排不下,如何換行
值: nowrap(默認) : 不換行 在一行顯示
wrap : 換行,第一行在上方
wrap-reverse :換行, 第一行在下方
justify-content屬性 定義了子元素在主軸上的對齊方式
值: flex-start(默認): 左對齊
flex-end : 右對齊
center : 居中
space-between : 兩端對齊, 子元素之間的間隔都相等(兩端對齊中間自適應)
space-around : 每個子元素兩側間隔相等, 所以子元素之間的間隔比子元素與邊框間隔大一倍
align-items屬性 定義子元素在側軸上如何對齊
值: flex-start : 側軸的起點對齊
flex-end : 側軸的終點對齊
center : 側軸的中點對齊
baseline : 子元素的第一行文字的基線對齊
stretch(默認) :
如果子元素未設置高度或設置為auto,將占滿整個容器的高度.
align-content屬性 定義了多根軸線的對齊方式, 如果子元素只有一根軸線,該屬性不起作用
值: flex-start 與側軸的起點對齊
flex-end 與側軸的終點對齊
center 與側軸的中點對齊
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分布。
space-around：每根軸線兩側的間隔都相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線占滿整個交叉軸。
子元素用屬性
order
flex-grow
flex-shrink
flex-basis
flex
align-self
order屬性 定義子元素的排列順序, 數值越小 排列越靠前 默認為0
order: 值是整數
flex-grow屬性 定義子元素的放大比例 ,默認值為0.即如果存在剩余空間,也不放大
flex-grow: 值為數字
注意: 如果所有項目的flex-grow屬性都為1，則它們將等分剩余空間（如果有的話）。 如果一個項目的flex-grow屬性為2，其他項目都為1，則前者占據的剩余空間將比其他項多一倍。
flex-shrink屬性定義了子元素的縮小比例,默認值為1,即如果空間不足,該子元素將縮小
注意: 如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
負值對該屬性無效。
flex-basis屬性 定義了再分配多余空間之前,子元素占據主軸空間,瀏覽器根據這個屬性,計算主軸是否有多余空間.他的默認值為auto,即子元素的本來大小
注意:它可以設為跟width或height屬性一樣的值（比如350px），則項目將占據固定空間。
flex屬性也可以認為是伸縮比例
首先要有個容器，並設置display:flex;display:-webkit-flex;該容器有以下六個屬性：
flex-direction (元素排列方向)
row, row-reverse, column, column-reverse
flex-wrap (換行)
nowrap, wrap, wrap-reverse
flex-flow (以上兩者的簡寫)
flex-direction || flex-wrap
justify-content (水平對齊方式)
flex-start, flex-end, center, space-between, space-around
align-items (垂直對齊方式)
stretch, flex-start, flex-end, center, baseline
align-content (多行垂直對齊方式)
stretch, flex-start, flex-end, center, space-between, space-around
項目的屬性
order 排列順序，數值，默認0
"integer"
flex-grow 如圖示7，定義放大比例，默認0，即如果存在剩余空間，也不放大。
"number"
flex-shrink 如圖示8，定義縮小比例，默認1，如果所有項目的flex-shrink屬性都為1，當空間不足時，都將等比例縮小。如果一個項目的flex-shrink屬性為0，其他項目都為1，則空間不足時，前者不縮小。
"number"
flex-basis 定義項目占據的主軸空間，默認auto。會根據flex-direction定義的主軸（水平或者垂直），定義項目本來的大小，跟width或者height一樣。
flex 推薦，以上三個的縮寫，默認 0 1 auto
"flex-grow" "flex-shrink" "flex-basis"
align-self 如圖示9，單個項目有與其他項目不一樣的對齊方式，可覆蓋align-items
1.flex-direction
row (從左往右)默認
row-reverse (從右往左)
column (從上往下)
column-reverse (從下往上)
2.flex-wrap
nowrap (不換行)默認
wrap (換行，且往下一行換)
wrap-reverse (換行，且往上一行換)
3.flex-flow，是flex-direction和flex-wrap的簡寫形式。
|
1
|
flex-flow:<flex-direction> || <flex-wrap>;
|
4.justify-content
flex-start
flex-end
center
space-between
space-around
|
5.align-items
stretch 默認
flex-start
flex-end
center
baseline 項目第一行文字的基准線對齊
|
6.align-content
stretch 默認
flex-start
flex-end
center
space-between
space-around
|
7.flex-grow
定義了放大比例，默認為0，即如果存在剩余空間，也不會放大。但是，如果所有項目的flex-grow屬性為1，則他們將等分剩余空間（如果有的話），如果其中一個為2，則他是其他項目的2倍寬度。
8.flex-shrink
定義了項目的縮小比例，默認為1，即如果空間不足，項目將縮小。如果有一個項目的flex-shrink為0，其他都為1，空間不足時，前者不縮小。
9.align-self，定義項目自己的對齊方式
