flex的簡介
在flex的容器中默認存在兩條軸，水平主軸main axis和垂直交叉軸cross axis，這是默認的設置，不過我們可以通過設置將主軸的方向變成垂直方向，交叉軸變成水平方向。
在一個被設置爲flex的容器中，每個直接子元素都被稱之爲flex item，每個flex item佔據着主軸空間是main size，佔據交叉軸上的空間叫做corss size;
需要注意的是：主軸和交叉軸的方向是可以設置的，默認的是主軸爲水平方向、交叉軸爲垂直方向；當然RN的表現和瀏覽器相反，默認主軸是垂直方向
flex容器
爲了實踐一個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 設置flex容器的主軸方向
flex-direction 決定主軸的方向(即項目的排列方向)，
.root{
display: flex | inline-flex; // 兩個值都可以使用
flex-direction: row | row-reverse | column | column-reverse; // 四個值可選
}-
row：主軸與行內軸方向作爲默認的書寫模式。即橫向從左到右排列（左對齊）。 -
row-reverse：對齊方式與row相反。[右對齊] -
column：主軸與塊軸方向作爲默認的書寫模式。即縱向從上往下排列（頂對齊）。 -
column-reverse：對齊方式與column相反。【底對齊】
僞代碼和僞展示分別對應如下的方式：
<div class="root">
<div class="item">1</div>
<div class="item">2</div>
<div class="item">3</div>
<div>
// 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 設置flex容器的子項目在主軸方向是否可以換行展示
默認的情況下，項目都應展開在主軸線上，通過設置flex-wrap可以達到主軸線上換行展示
.root{
flex-wrap: nowrap | wrap | wrap-reverse; // 三個值選其一
}三個取值分別是：
-
nowrap默認值，也就是即使容器的空間不足，也不會換行，而是調整子元素的尺寸。 -
wrap是指如果子元素超出了容器的空間，那麼需要換行，而且需要按Z字順序排開，即第一行在最上方； -
wrap-reverse是指換行展示，但是按照逆序的Z排開，即第一排在最下方，每一排的主軸方向的排序還是按照flex-direction的設置展示。
flex-flow 是一個類似的語法糖，是前面所訴的兩者的結合體
flex-flow：<' flex-direction '> || <' flex-wrap '>，可以看到這是一個複合屬性。設置或檢索彈性盒模型對象的子元素排列方式。
.root{
flex-flow: row nowrap;
}
// 等同於以下
.root{
flex-direction: row;
flex-wrap: nowrap;
}justify-content 設置主軸方向上的對齊方式
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,_]
align-items 定義了項目在交叉軸上的對齊方式
.root {
align-items: flex-start | flex-end | center | baseline | stretch;
}默認值是stretch,這五個值：
-
flex-start是指在交叉軸方向上的各子元素之間的對齊方式是在交叉軸的起點對齊； -
flex-end是指在交叉軸上的對齊方式是以交叉軸的重點對齊方式； -
center是在交叉軸方向上是以交叉軸方向上的居中方式對齊 -
baseline是在交叉軸的方向上的第一行文字的基線對齊 -
stretch是在交叉軸上的子項目未設置高度或者設爲 auto，將佔滿整個容器的高度。
align-content
定義了多根軸線的對齊方式，如果項目只有一根軸線，那麼該屬性將不起作用;當你 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'。在其它情況下，剩餘空間被所有行平分，以擴大它們的側軸尺寸。
子容器flex-item
有六種屬性可運用在 item 項目上：
- order
- flex-basis
- flex-grow
- flex-shrink
- flex
- align-self
order:
定義項目在容器中的排列順序，數值越小，排列越靠前，默認值爲 0
.item {
order: <integer>;
}flex-basis:
定義了在分配多餘空間之前，項目佔據的主軸空間，瀏覽器根據這個屬性，計算主軸是否有多餘空間
.item {
flex-basis: <length> | auto;
}默認值：auto，即項目本來的大小, 這時候 item 的寬高取決於 width 或 height 的值。
當主軸爲水平方向的時候，當設置了 flex-basis，項目的寬度設置值會失效，flex-basis 需要跟 flex-grow 和 flex-shrink 配合使用才能發揮效果。
當 flex-basis 值爲 0 % 時，是把該項目視爲零尺寸的，故即使聲明該尺寸爲 140px，也並沒有什麼用。
當 flex-basis 值爲 auto 時，則跟根據尺寸的設定值(假如爲 100px)，則這 100px 不會納入剩餘空間。
flex-grow 定義項目的放大比例
.item {
flex-grow: <number>;
}默認值爲 0，即如果存在剩餘空間，也不放大;
當所有的項目都以 flex-basis 的值進行排列後，仍有剩餘空間，那麼這時候 flex-grow 就會發揮作用了。
如果所有項目的 flex-grow 屬性都爲 1，則它們將等分剩餘空間。(如果有的話)
如果一個項目的 flex-grow 屬性爲 2，其他項目都爲 1，則前者佔據的剩餘空間將比其他項多一倍。
當然如果當所有項目以 flex-basis 的值排列完後發現空間不夠了，且 flex-wrap：nowrap 時，此時 flex-grow 則不起作用了，這時候就需要接下來的這個屬性。
flex-shrink
.item {
flex-shrink: <number>;
}默認值: 1，即如果空間不足，該項目將縮小，負值對該屬性無效。
flex
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-self
允許單個項目有與其他項目不一樣的對齊方式
單個項目覆蓋 align-items 定義的屬性
默認值爲 auto，表示繼承父元素的 align-items 屬性，如果沒有父元素，則等同於 stretch。
.item {
align-self: auto | flex-start | flex-end | center | baseline | stretch;
}這個跟 align-items 屬性時一樣的，只不過 align-self 是對單個項目生效的，而 align-items 則是對容器下的所有項目生效的。