基本的布局原則

不像安卓里有那么多的定義好了布局規(guī)則的ViewGroup，比如RelativeLayout，Linearlayout，以及Listview，GridView等，flex布局的名字就只有這一種（display: flex;），它是通過容器的一些屬性來控制具體的布局規(guī)則的。

那么如何確定布局規(guī)則呢？

容器上的屬性

第一步，確定眾多的item是橫向排列還是縱向排列：

flex-direction：
        row（默認(rèn)值）：主軸為水平方向，起點(diǎn)在左端。
        row-reverse：主軸為水平方向，起點(diǎn)在右端。
        column：主軸為垂直方向，起點(diǎn)在上沿。
        column-reverse：主軸為垂直方向，起點(diǎn)在下沿。

第二步：一行或者一列放不下，怎么辦？怎樣換行或換列？

flex-wrap: nowrap | wrap | wrap-reverse;

前面兩個(gè)屬性的簡寫形式：flex-flow

flex-flow: <flex-direction> || <flex-wrap>;

第三步：每個(gè)item之間在主軸方向上（flex-direction所確定的方向）以什么方式對齊？

justify-content: 
    flex-start（默認(rèn)值）：左對齊
    flex-end：右對齊
    center： 居中
    space-between：兩端對齊，項(xiàng)目之間的間隔都相等。
    space-around：每個(gè)項(xiàng)目兩側(cè)的間隔相等。所以，項(xiàng)目之間的間隔比項(xiàng)目與邊框的間隔大一倍。

第四步：每個(gè)item在交叉軸方向上以什么方式對齊？

align-items:
    flex-start：交叉軸的起點(diǎn)對齊。
    flex-end：交叉軸的終點(diǎn)對齊。
    center：交叉軸的中點(diǎn)對齊。
    baseline: 項(xiàng)目的第一行文字的基線對齊。
    stretch（默認(rèn)值）：如果項(xiàng)目未設(shè)置高度或設(shè)為auto，將占滿整個(gè)容器的高度。

第五步：多行或者多列時(shí)（多根軸線），軸線和軸線之間的對齊方式

align-content: flex-start | flex-end | center | space-between | space-around | stretch;

每個(gè)item的屬性

1.排列順序：order，數(shù)值越小，排列越靠前，默認(rèn)為0。
一般情況下，控件一個(gè)個(gè)寫過去，沒什么可說的，但有時(shí)想把后面的一個(gè)控件顯示到前面，或者把前面的一個(gè)控件顯示在最后，就需要這個(gè)了

2.大小/寬高的控制：

2.1項(xiàng)目的大小：flex-basis
flex-basis: length | auto; /* default auto */

2.2 當(dāng)項(xiàng)目多時(shí)，我這個(gè)項(xiàng)目怎么縮?。篺lex-shrink

2.3 當(dāng)項(xiàng)目少時(shí)，本項(xiàng)目怎么放大：flex-grow

注：flex-shrink和flex-grow有點(diǎn)類似于安卓中線性布局的weight。

　縮寫形式：flex

flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
該屬性有兩個(gè)快捷值：auto (1 1 auto) 和 none (0 0 auto)。

3.對齊方式，可以覆蓋容器上規(guī)定的對齊規(guī)則。

類似于Android中母布局中g(shù)ravity與子布局中l(wèi)ayout-gravity的關(guān)系。這里的相關(guān)屬性值可以類比Android中相對布局中子view 定位的相關(guān)屬性。

align-self: auto | flex-start | flex-end | center | baseline | stretch;