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

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

需要注意的是：主軸和交叉軸的方向是可以設(shè)置的，默認(rèn)的是主軸為水平方向、交叉軸為垂直方向；當(dāng)然RN的表現(xiàn)和瀏覽器相反，默認(rèn)主軸是垂直方向

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

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

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

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

flex-direction

flex-wrap

flex-flow

justify-content

align-items

align-content

這里會(huì)對(duì)這幾個(gè)屬性進(jìn)行分別的解釋

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

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

row：主軸與行內(nèi)軸方向作為默認(rèn)的書寫模式。即橫向從左到右排列（左對(duì)齊）。

row-reverse：對(duì)齊方式與row相反。[右對(duì)齊]

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

column-reverse：對(duì)齊方式與column相反。【底對(duì)齊】

偽代碼和偽展示分別對(duì)應(yīng)如下的方式：

    
1
    
2
    
3


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

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

默認(rèn)的情況下，項(xiàng)目都應(yīng)展開在主軸線上，通過設(shè)置flex-wrap可以達(dá)到主軸線上換行展示

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

三個(gè)取值分別是：

nowrap默認(rèn)值，也就是即使容器的空間不足，也不會(huì)換行，而是調(diào)整子元素的尺寸。

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

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

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

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

justify-content；定義了項(xiàng)目在主軸的對(duì)齊方式。

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

這個(gè)屬性的設(shè)置和flex-direction屬性有關(guān)，下面的值都將是以flex-direction: row;進(jìn)行判斷的，其中的五個(gè)值分別是：

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

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

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

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

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

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

默認(rèn)值是stretch,這五個(gè)值：

flex-start是指在交叉軸方向上的各子元素之間的對(duì)齊方式是在交叉軸的起點(diǎn)對(duì)齊；

flex-end 是指在交叉軸上的對(duì)齊方式是以交叉軸的重點(diǎn)對(duì)齊方式；

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

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

stretch 是在交叉軸上的子項(xiàng)目未設(shè)置高度或者設(shè)為 auto，將占滿整個(gè)容器的高度。

定義了多根軸線的對(duì)齊方式，如果項(xiàng)目只有一根軸線，那么該屬性將不起作用;當(dāng)你 flex-wrap 設(shè)置為 nowrap 的時(shí)候，容器僅存在一根軸線，因?yàn)轫?xiàng)目不會(huì)換行，就不會(huì)產(chǎn)生多條軸線。

當(dāng)你 flex-wrap 設(shè)置為 wrap 的時(shí)候，容器可能會(huì)出現(xiàn)多條軸線，這時(shí)候你就需要去設(shè)置多條軸線之間的對(duì)齊方式了。

建立在主軸為水平方向時(shí)測(cè)試，即 flex-direction: row, flex-wrap: wrap

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

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

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

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

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

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

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

有六種屬性可運(yùn)用在 item 項(xiàng)目上：

order

flex-basis

flex-grow

flex-shrink

flex

align-self

定義項(xiàng)目在容器中的排列順序，數(shù)值越小，排列越靠前，默認(rèn)值為 0

.item {
    order: ;
}

定義了在分配多余空間之前，項(xiàng)目占據(jù)的主軸空間，瀏覽器根據(jù)這個(gè)屬性，計(jì)算主軸是否有多余空間

.item {
    flex-basis:  | auto;
}

默認(rèn)值：auto，即項(xiàng)目本來的大小, 這時(shí)候 item 的寬高取決于 width 或 height 的值。

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

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

.item {
    flex-grow: ;
}

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

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

如果一個(gè)項(xiàng)目的 flex-grow 屬性為 2，其他項(xiàng)目都為 1，則前者占據(jù)的剩余空間將比其他項(xiàng)多一倍。

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

.item {
    flex-shrink: ;
}

默認(rèn)值: 1，即如果空間不足，該項(xiàng)目將縮小，負(fù)值對(duì)該屬性無效。

flex-grow, flex-shrink 和 flex-basis的簡(jiǎn)寫

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

這里可以看出，雖然每個(gè)項(xiàng)目都設(shè)置了寬度為 50px，但是由于自身容器寬度只有 200px，這時(shí)候每個(gè)項(xiàng)目會(huì)被同比例進(jìn)行縮小，因?yàn)槟J(rèn)值為 1。
同理可得：

如果所有項(xiàng)目的 flex-shrink 屬性都為 1，當(dāng)空間不足時(shí)，都將等比例縮小。

如果一個(gè)項(xiàng)目的 flex-shrink 屬性為 0，其他項(xiàng)目都為 1，則空間不足時(shí)，前者不縮小。

auto (1 1 auto)

none (0 0 auto)

1 (1,,1, 0%)

0 (0,1,0%)

當(dāng) flex 取值為一個(gè)長度或百分比，則視為 flex-basis 值，flex-grow 取 1，flex-shrink 取 1，

當(dāng) flex 取值為兩個(gè)非負(fù)數(shù)字，則分別視為 flex-grow 和 flex-shrink 的值，flex-basis 取 0%，

當(dāng) flex 取值為一個(gè)非負(fù)數(shù)字和一個(gè)長度或百分比，則分別視為 flex-grow 和 flex-basis 的值，flex-shrink 取 1

允許單個(gè)項(xiàng)目有與其他項(xiàng)目不一樣的對(duì)齊方式
單個(gè)項(xiàng)目覆蓋 align-items 定義的屬性

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

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

這個(gè)跟 align-items 屬性時(shí)一樣的，只不過 align-self 是對(duì)單個(gè)項(xiàng)目生效的，而 align-items 則是對(duì)容器下的所有項(xiàng)目生效的。