摘要：需要注意的是當時設置布局之后，子元素的的屬性將會失效。各行向彈性盒容器的中間位置堆疊。各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。各行將會伸展以占用剩余的空間。

在flex的容器中默認存在兩條軸，水平主軸main axis和垂直交叉軸cross axis，這是默認的設置，不過我們可以通過設置將主軸的方向變成垂直方向，交叉軸變成水平方向。
在一個被設置為flex的容器中，每個直接子元素都被稱之為flex item，每個flex item占據著主軸空間是main size，占據交叉軸上的空間叫做corss size;

需要注意的是：主軸和交叉軸的方向是可以設置的，默認的是主軸為水平方向、交叉軸為垂直方向；當然RN的表現和瀏覽器相反，默認主軸是垂直方向

為了實踐一個flex布局，我們首先需要一個容器，也就是父元素，并指定為flex布局，這樣，容器就具備了上述的flex的特性，其直接子元素也將成為flex item；設置為flex容器也很簡單：

.root{
    display: flex | inline-flex;  // 兩個值都可以使用
}

上述的兩個值可以分別生成一個塊級flex容器盒子、一個行內flex容器盒子，簡單說來，如果你使用塊元素如 div，你就可以使用 flex，而如果你使用行內元素，你可以使用 inline-flex。
需要注意的是：當時設置 flex 布局之后，子元素的 float、clear、vertical-align 的屬性將會失效。

設置為flex的容器，有以下六種可以設置的屬性：

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

這里會對這幾個屬性進行分別的解釋

flex-direction 決定主軸的方向(即項目的排列方向)，

.root{
    display: flex | inline-flex;  // 兩個值都可以使用
    flex-direction: row | row-reverse | column | column-reverse; // 四個值可選
}

row：主軸與行內軸方向作為默認的書寫模式。即橫向從左到右排列（左對齊）。

row-reverse：對齊方式與row相反。[右對齊]

column：主軸與塊軸方向作為默認的書寫模式。即縱向從上往下排列（頂對齊）。

column-reverse：對齊方式與column相反。【底對齊】

偽代碼和偽展示分別對應如下的方式：

    
1
    
2
    
3


//   flex-direction: row  水平靠左排列 第一個元素在左邊
【1，2，3  】
//   flex-direction: row-reverse  水平靠右排列 第一個元素在右邊
【  3，2，1】
//   flex-direction: column  垂直靠頂部排列 第一個元素在最頂部
【
  1，
  2，
  3，
  】
//   flex-direction: column-reverse  垂直靠底部排列 第一個元素在最底部
【
  3，
  2，
  1，
  】

注意：該屬性通過定義flex容器的主軸方向來決定felx子項在flex容器中的位置。這將決定flex需要如何進行排列，不僅是對齊方向，還有是子元素的排列順序，第一個元素或者order靠前的將會出現在對齊方向的第一個位置處

默認的情況下，項目都應展開在主軸線上，通過設置flex-wrap可以達到主軸線上換行展示

.root{
    flex-wrap: nowrap | wrap | wrap-reverse; // 三個值選其一
}

三個取值分別是：

nowrap默認值，也就是即使容器的空間不足，也不會換行，而是調整子元素的尺寸。

wrap是指如果子元素超出了容器的空間，那么需要換行，而且需要按Z字順序排開，即第一行在最上方；

wrap-reverse是指換行展示，但是按照逆序的Z排開，即第一排在最下方，每一排的主軸方向的排序還是按照flex-direction的設置展示。

flex-flow：<" flex-direction "> || <" flex-wrap ">，可以看到這是一個復合屬性。設置或檢索彈性盒模型對象的子元素排列方式。

.root{
    flex-flow: row nowrap;
}
// 等同于以下
.root{
    flex-direction: row;
    flex-wrap: nowrap;
}

justify-content；定義了項目在主軸的對齊方式。

.root{
    justify-content：flex-start | flex-end | center | space-between | space-around; // 五個值選其一
}

這個屬性的設置和flex-direction屬性有關，下面的值都將是以flex-direction: row;進行判斷的，其中的五個值分別是：

flex-start: 是指靠主軸方向的起始位置對齊，flex-direction: row;條件下就是子元素靠左邊對齊，盡可能空出右邊；[1,2,3, _ _ _ _ _ _]

flex-end: 是指靠主軸方向的結束位置對齊，flex-direction: row;條件下就是子元素靠右對齊；盡可能空出左邊。[_ _ _ _ _ _,1,2,3]

center: 是指靠主軸的中心位置對齊，flex-direction: row;條件下就是子元素居中對齊；盡可能左右兩邊空出相同空間；[_ _ _1,2,3, _ _ _]

space-between: 是指在主軸上左右兩邊不留空隙，并使子元素之間的間隙相等；[1,_ _ _,2,_ _ _,3]

space-around: 是指主軸上左右兩邊也留空隙，所有的子項目兩側自身邊距相等，均勻分布在主軸上，所以項目之間的間隔比項目與邊緣的間隔大一倍。[_,1,_ _,2,_ _,3,_]

.root {
    align-items: flex-start | flex-end | center | baseline | stretch;
}

默認值是stretch,這五個值：

flex-start是指在交叉軸方向上的各子元素之間的對齊方式是在交叉軸的起點對齊；

flex-end 是指在交叉軸上的對齊方式是以交叉軸的重點對齊方式；

center 是在交叉軸方向上是以交叉軸方向上的居中方式對齊

baseline 是在交叉軸的方向上的第一行文字的基線對齊

stretch 是在交叉軸上的子項目未設置高度或者設為 auto，將占滿整個容器的高度。

定義了多根軸線的對齊方式，如果項目只有一根軸線，那么該屬性將不起作用;當你 flex-wrap 設置為 nowrap 的時候，容器僅存在一根軸線，因為項目不會換行，就不會產生多條軸線。

當你 flex-wrap 設置為 wrap 的時候，容器可能會出現多條軸線，這時候你就需要去設置多條軸線之間的對齊方式了。

建立在主軸為水平方向時測試，即 flex-direction: row, flex-wrap: wrap

.root{
    align-content：flex-start | flex-end | center | space-between | space-around | stretch
}

flex-start：各行向彈性盒容器的起始位置堆疊。彈性盒容器中第一行的側軸起始邊界緊靠住該彈性盒容器的側軸起始邊界，之后的每一行都緊靠住前面一行。

flex-end：各行向彈性盒容器的結束位置堆疊。彈性盒容器中最后一行的側軸起結束界緊靠住該彈性盒容器的側軸結束邊界，之后的每一行都緊靠住前面一行。

center：各行向彈性盒容器的中間位置堆疊。各行兩兩緊靠住同時在彈性盒容器中居中對齊，保持彈性盒容器的側軸起始內容邊界和第一行之間的距離與該容器的側軸結束內容邊界與第最后一行之間的距離相等。（如果剩下的空間是負數，則各行會向兩個方向溢出的相等距離。）

space-between：各行在彈性盒容器中平均分布。如果剩余的空間是負數或彈性盒容器中只有一行，該值等效于"flex-start"。在其它情況下，第一行的側軸起始邊界緊靠住彈性盒容器的側軸起始內容邊界，最后一行的側軸結束邊界緊靠住彈性盒容器的側軸結束內容邊界，剩余的行則按一定方式在彈性盒窗口中排列，以保持兩兩之間的空間相等。

space-around：各行在彈性盒容器中平均分布，兩端保留子元素與子元素之間間距大小的一半。如果剩余的空間是負數或彈性盒容器中只有一行，該值等效于"center"。在其它情況下，各行會按一定方式在彈性盒容器中排列，以保持兩兩之間的空間相等，同時第一行前面及最后一行后面的空間是其他空間的一半。

stretch：各行將會伸展以占用剩余的空間。如果剩余的空間是負數，該值等效于"flex-start"。在其它情況下，剩余空間被所有行平分，以擴大它們的側軸尺寸。

有六種屬性可運用在 item 項目上：

order

flex-basis

flex-grow

flex-shrink

flex

align-self

定義項目在容器中的排列順序，數值越小，排列越靠前，默認值為 0

.item {
    order: ;
}

定義了在分配多余空間之前，項目占據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多余空間

.item {
    flex-basis:  | auto;
}

默認值：auto，即項目本來的大小, 這時候 item 的寬高取決于 width 或 height 的值。

當主軸為水平方向的時候，當設置了 flex-basis，項目的寬度設置值會失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能發(fā)揮效果。

當 flex-basis 值為 0 % 時，是把該項目視為零尺寸的，故即使聲明該尺寸為 140px，也并沒有什么用。
當 flex-basis 值為 auto 時，則跟根據尺寸的設定值(假如為 100px)，則這 100px 不會納入剩余空間。

.item {
    flex-grow: ;
}

默認值為 0，即如果存在剩余空間，也不放大;

當所有的項目都以 flex-basis 的值進行排列后，仍有剩余空間，那么這時候 flex-grow 就會發(fā)揮作用了。
如果所有項目的 flex-grow 屬性都為 1，則它們將等分剩余空間。(如果有的話)

如果一個項目的 flex-grow 屬性為 2，其他項目都為 1，則前者占據的剩余空間將比其他項多一倍。

當然如果當所有項目以 flex-basis 的值排列完后發(fā)現空間不夠了，且 flex-wrap：nowrap 時，此時 flex-grow 則不起作用了，這時候就需要接下來的這個屬性。

.item {
    flex-shrink: ;
}

默認值: 1，即如果空間不足，該項目將縮小，負值對該屬性無效。

flex-grow, flex-shrink 和 flex-basis的簡寫

.item{
    flex: none | [ <"flex-grow"> <"flex-shrink">? || <"flex-basis"> ]
} 

這里可以看出，雖然每個項目都設置了寬度為 50px，但是由于自身容器寬度只有 200px，這時候每個項目會被同比例進行縮小，因為默認值為 1。
同理可得：

如果所有項目的 flex-shrink 屬性都為 1，當空間不足時，都將等比例縮小。

如果一個項目的 flex-shrink 屬性為 0，其他項目都為 1，則空間不足時，前者不縮小。

auto (1 1 auto)

none (0 0 auto)

1 (1,,1, 0%)

0 (0,1,0%)

當 flex 取值為一個長度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，

當 flex 取值為兩個非負數字，則分別視為 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，

當 flex 取值為一個非負數字和一個長度或百分比，則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1

允許單個項目有與其他項目不一樣的對齊方式
單個項目覆蓋 align-items 定義的屬性

默認值為 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同于 stretch。

.item {
     align-self: auto | flex-start | flex-end | center | baseline | stretch;
}

這個跟 align-items 屬性時一樣的，只不過 align-self 是對單個項目生效的，而 align-items 則是對容器下的所有項目生效的。