關於Flex
Flex “彈性佈局”，任何一個容器都可以指定爲Flex 佈局。
.box{
display:flex;
}
採用Flex佈局的元素，稱爲Flex容器（flex container），簡稱“容器”。它的所有子元素自動成爲容器成員，成爲flex項目（flex item），簡稱“項目”。
設爲flex佈局以後，子元素的float、clear和vertical-align屬性將失效.
容器默認存在兩根軸：水平的主軸（main axis）和垂直的交叉軸（cross axis）。
主軸的開始位置叫做main start，結束位置叫做main end；
交叉軸的開始位置叫做cross start，結束位置叫做cross end。
項目默認沿主軸排列。
單個項目佔據的主軸空間叫做main size，
佔據的交叉軸空間叫做cross size。
容器屬性
-
flex-direction:row | row-reverse | column | column-reverse;
屬性規定靈活項目的方向row(默認): 主軸爲水平方向，起點在左端，正序 row-reverse: 主軸爲水平方向，起點在右端，相反的順序 column: 主軸爲垂直方向，起點在上沿 column-reverse:主軸爲垂直方向，起點在上沿，相反的順序 -
flex-wrap
規定flex容器是單行或者多行，同時橫軸的方向決定了新行堆疊的方向。nowrap: 默認值。規定靈活的項目不拆行或不拆列。 wrap: 規定靈活的項目在必要的時候拆行或拆列。 wrap-reverse: 規定靈活的項目在必要的時候拆行或拆列，但是以相反的順序。 -
flex-flow
是flex-direction屬性和flex-wrap屬性的簡寫形式，默認 row nowrap。 -
justify-content
用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。flex-start 默認值。項目位於容器的開頭。左上開始 flex-end 項目位於容器的結尾。右上開始 center 項目位於容器的中心。容器頂部中間 space-between 項目位於各行之間留有空白的容器內。容器頂部各子項中間空白 space-around 項目位於各行之前、之間、之後都留有空白的容器內。容器頂部子項前後均自動留空白。 -
align-items
定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。stretch: 默認值。元素被拉伸以適應容器。 如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。 center: 元素位於容器的中心。 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。 flex-start: 元素位於容器的開頭。 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。 flex-end: 元素位於容器的結尾。 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。 baseline: 元素位於容器的基線上。 如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。 -
align-content
用於設置或檢索彈性盒子元素在主軸（橫軸）方向上的對齊方式。stretch: 默認值。元素被拉伸以適應容器。 各行將會伸展以佔用剩餘的空間。如果剩餘的空間是負數，該值等效於'flex-start'。在其它情況下，剩餘空間被所有行平分，以擴大它們的側軸尺寸。\ center: 元素位於容器的中心。 各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最後一行之間的距離相等。（如果剩下的空間是負數，則各行會向兩個方向溢出的相等距離。） flex-start: 元素位於容器的開頭。 各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之後的每一行都緊靠住前面一行。 flex-end: 元素位於容器的結尾。 各行向彈性盒容器的結束位置堆疊。彈性盒容器中最後一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，之後的每一行都緊靠住前面一行。 space-between: 元素位於各行之間留有空白的容器內。 各行在彈性盒容器中平均分佈。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'flex-start'。在其它情況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最後一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩餘的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。 space-around: 元素位於各行之前、之間、之後都留有空白的容器內。 各行在彈性盒容器中平均分佈，兩端保留子元素與子元素之間間距大小的一半。如果剩餘的空間是負數或彈性盒容器中只有一行，該值等效於'center'。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最後一行後面的空間是其他空間的一半。
項目屬性
-
order
設置或檢索彈性盒模型對象的子元素出現的順序。
number: 默認值是 0。規定靈活項目的順序。 -
flex-grow:
用於設置或檢索彈性盒子的擴展比率。
number 一個數字，規定項目將相對於其他靈活的項目進行擴展的量。默認值是 0。 -
flex-shrink:
子項元素僅在默認寬度之和大於容器的時候纔會發生收縮，其收縮的大小是依據 flex-shrink 比例的值。 -
flex-basis：
用於設置或檢索彈性盒伸縮基準值。number 一個長度單位或者一個百分比，規定靈活項目的初始長度。 auto 默認值。長度等於靈活項目的長度。如果該項目未指定長度，則長度將根據內容決定。 -
flex
flex 屬性用於設置或檢索彈性盒模型對象的子元素如何分配空間。
flex 屬性是 flex-grow、flex-shrink 和 flex-basis 屬性的簡寫屬性。 -
align-items:
屬性定義flex子項在flex容器的當前行的側軸（縱軸）方向上的對齊方式。 -
align-self
定義flex子項單獨在側軸（縱軸）方向上的對齊方式，會覆蓋align-items的通用設置。stretch: 元素被拉伸以適應容器。 如果指定側軸大小的屬性值爲'auto'，則其值會使項目的邊距盒的尺寸儘可能接近所在行的尺寸，但同時會遵照'min/max-width/height'屬性的限制。 center 元素位於容器的中心。 彈性盒子元素在該行的側軸（縱軸）上居中放置。（如果該行的尺寸小於彈性盒子元素的尺寸，則會向兩個方向溢出相同的長度）。 flex-start: 元素位於容器的開頭。 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸起始邊界。 flex-end: 元素位於容器的結尾。 彈性盒子元素的側軸（縱軸）起始位置的邊界緊靠住該行的側軸結束邊界。 baseline: 元素位於容器的基線上。 如彈性盒子元素的行內軸與側軸爲同一條，則該值與'flex-start'等效。其它情況下，該值將參與基線對齊。
