Flex佈局基礎知識

Flex佈局所使用的到的屬性，簡單分爲如下兩類：

1.規定子控件的排列規則

2.決定組件自身的顯示規則

LinearLayout中，咱們使用orientation來規定內部子組件的排列方向，如TextView，ImageView的排列方向等，因此說orientation這個屬性是用來規定子控件的排列規則的屬性，他屬於上面的第一類！

子組件自身也有屬性，好比TextView內的文字想要實現居中怎麼辦？ 這時候在Linearlayout中的屬性，就沒有做用了，要使用gravity這一組件自身的屬性來進行設置，這屬於第二類，決定組件自身的顯示規則，

1.1規定子控件的排列規則

1.1.1 flex-direction VS orientation

在Flex佈局中，使用flexDirection屬性來規定組件排列的方向，就像orientation同樣，有水平排列和垂直排列，可是flexDirection的值有四種

row

按照水平方向排列，和orientation：horizontal做用相同

row-reverse

按照水平方向排列，可是從右向左排列

column

column表示垂直排列，和orientation：vertical的做用的相同。規定組件從上到下進行排列。

column-reverse

垂直方向排列，可是從下至上

1.1.2 flex-wrap

這個屬性的做用：當一行排列不下的時候，是否容許換行

nowrap

該值代表，即便一行顯示不小，也不容許換行，致使後面的元素不可見

wrap

該值表示，當一行排列不下的時候，會自動和換行。

wrap-reverse

該值表示，當沒法顯示徹底時，會換行且第一行在下方

1.1.3 justify-Content VS layout-gravity

justifyContent屬性和layout-gravity屬性相似，都是設置組件在容器中的對齊方式。layout-gravity能夠設置center,left,right,justifyContent也能夠設置。具體以下圖所示：

flex-start:向左對齊

flex-end:向右對齊

center:居中對齊

space-between:兩端對齊，控件之間的間隔相同

space-around:每一個項目兩側的間距相等

1.1.4 align-Items

該屬性規定了在垂直方向上怎麼排列。看圖！

flex-start:與上方對齊

flex-end:與下方對齊

center:垂直居中

stretch:若是沒有設置默認高度就會佔滿整個父容器的高度

align-content

該屬性定義了多根軸線的對齊方式。若是項目只有一根軸線，該屬性不起做用。

flex-start：與交叉軸的起點對齊。
flex-end：與交叉軸的終點對齊。
center：與交叉軸的中點對齊。
space-between：與交叉軸兩端對齊，軸線之間的間隔平均分佈。
space-around：每根軸線兩側的間隔都相等。因此，軸線之間的間隔比軸線與邊框的間隔大一倍。
stretch（默認值）：軸線佔滿整個交叉軸。

複製代碼

1.2規定控件自身的的顯示規則

order:定義組件的排列順序，數據越小，排列越靠前
flex-grow:定義組件的放大比例，默認爲0，即存在剩餘控件也不放大
flex-shrink:屬性定義了項目的縮小比例，默認爲1，即若是空間不足，該項目將縮小。
align-self:align-self屬性容許單個項目有與其餘項目不同的對齊方式，可覆蓋align-items屬性。默認值爲auto，表示繼承父元素的align-items屬性，若是沒有父元素，則等同於stretch。

複製代碼