基本的布局原則

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

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

容器上的屬性

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

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

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

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

前面兩個屬性的簡寫形式：flex-flow

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

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

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

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

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

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

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

每個item的屬性

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

2.大小/寬高的控制：

2.1項目的大小：flex-basis
flex-basis: length | auto; /* default auto */

2.2 當項目多時，我這個項目怎么縮小：flex-shrink

2.3 當項目少時，本項目怎么放大：flex-grow

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

　縮寫形式：flex

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

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

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

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