前言
工欲善其事必先利其器，學習FlexboxLayout之前，先看看它是用來干嘛的，都有哪些特性，了解之后，再來利用它。先放上項目地址--flexbox-layout的GitHub地址
正文
概念
Flexbox，簡單理解為彈性盒子，就是一個可伸縮的區域或者空間
在GitHub上，給出的介紹是一個將CSS Flexible Box Layout Module的類似功能帶入Android的庫，關于CSS的Flexible Box，這里有一篇介紹比較詳細的文章 ,盡管具體語法不同，但是思想是想通的，可以參考。
FlexboxLayout可以理解成一個高級版的LinearLayout，因為兩個布局都把子view按順序排列。兩者之間最大的差別在于FlexboxLayout具有換行的特性。引入
穩定版本
dependencies {
compile 'com.google.android:flexbox:0.2.6'
}
開發測試版本 --包含了Recyclerview的集成
dependencies {
compile 'com.google.android:flexbox:0.3.0-alpha3'
}
根據個人需求，選擇合適版本
- 用法
<com.google.android.flexbox.FlexboxLayout
android:layout_width="match_parent"
android:layout_height="match_parent"
app:alignItems="flex_start">
<TextView
android:layout_width="100dp"
android:layout_height="100dp"
android:background="@color/colorAccent" />
<TextView
android:layout_width="100dp"
android:layout_height="150dp"
android:background="@color/blue" />
<TextView
android:layout_width="100dp"
android:layout_height="180dp"
android:background="@color/little_pink_primary" />
<TextView
android:layout_width="100dp"
android:layout_height="50dp"
android:background="@color/black" />
<TextView
android:layout_width="120dp"
android:layout_height="100dp"
android:background="@color/orange" />
<TextView
android:layout_width="100dp"
android:layout_height="80dp"
android:background="@color/side" />
<TextView
android:layout_width="80dp"
android:layout_height="200dp"
android:background="@color/reset_check" />
</com.google.android.flexbox.FlexboxLayout>
可以看到類似LinearLayout，子元素是依次排列，唯一設置了屬性就是app:alignItems="flex_start"，那么FlexboxLayout都有哪些屬性，每個屬性的作用，需要我們一點點梳理，具體分為兩個方面，一方面是FlexboxLayout的屬性，另一方面是FlexboxLayout子元素的屬性
FlexboxLayout屬性
- flexDirecition 子元素在主軸的排列方向
- app:flexDirection="row" 默認值，水平方向，起點在左，從左到右。
- app:flexDirection="row_reverse" 和row屬性相反，水平方向，從右到左，起點在右端。
- app:flexDirection="column" 主軸是豎直方向，起點在上端，從上到下。
- app:flexDirection="column_reverse" 和column相反，豎直方向，起點在下方從下到上
通過四張圖的對比，是明顯看出來各個屬性的作用的
- alignItems 子元素在副軸的排列方向，例如：主軸水平方向--副軸豎直方向
- stretch 默認值，如果子元素未設置高度或設為auto，將占滿整個父容器的高度
- flex_start：頂端對齊
- flex_end：底部對齊
- center：居中對齊
- baseline：子元素的第一行內容的基線對齊
stretch
根據圖能很明顯看出baseline的作用
- flexWrap 默認 Flex不換行，更改flexWrap可以支持換行
- nowrap不換行
- wrap 換行
-
wrap_reverse 反向換行
nowrap
- justifyContent 元素在主軸的對齊方式
- flex_start 默認，左對齊
- flex_end 右對齊
-center 居中對齊 - space_around 相鄰元素兩側間隔相等，兩側元素和邊框的間隔是兩個元素間隔的一半
-
space-between 兩端對齊，相鄰兩元素間隔相等
flex_start
alignContent 存在多條副軸時，副軸軸線時的對齊方式，子元素只有一行時不起作用
-
stretch 默認值，充滿副軸的高度，只有副軸排列app:alignItems="stretch"時，app:alignContent="stretch"才會生效，即app:alignItems="stretch"且app:alignContent="stretch"
alignContent="stretch"且app:alignItems="stretch" -
flex_start 與交叉軸的起點對齊
flex_start flex_end 與交叉軸的終點對齊
- center：與交叉軸的中點對齊。
-
space_around 每根軸線兩側間隔相等。所以，軸線之間的間隔比軸線與邊框的間隔大一倍
space_around -
space_between 兩端對齊，軸線之間的間隔相等
space_between
- **showDividerHorizontal **
控制顯示水平方向的分割線，值為none | beginning | middle | end其中的一個或者多個 - **dividerDrawableHorizontal **
設置Flex 軸線之間水平方向的分割線。 -
showDividerVertical
控制顯示垂直方向的分割線，值為none | beginning | middle | end其中的一個或者多個。 -
dividerDrawableVertical
設置子元素垂直方向的分割線。 -
showDivider
控制顯示水平和垂直方向的分割線，值為none | beginning | middle | end其中的一個或者多個。 -
dividerDrawable
設置水平和垂直方向的分割線，但是注意,如果同時和其他屬性使用，比如為 Flex 軸、子元素設置了justifyContent="space_around" 、alignContent="space_between" 等等。可能會看到意料不到的空間，因此應該避免和這些值同時使用。
FlexboxLayout子元素屬性
-
layout_order
子元素默認是按照元素的位置先后排列的，但是layout_order的值可以控制元素的排列順序，按照數字的大小排列，例如將第三個元素layout_order 設置-1
layout_flexGrow 元素放大比例，默認為0，類似于 LinearLayout 中的layout_weight屬性，根據比例等分，如果有一個子元素的 layout_flexGrow 是一個正值，那么會將全部剩余空間分配給這個Item,如果有多個Item這個屬性都為正值，那么剩余空間的分配按照layout_flexGrow定義的比例等分。
layout_flexShrink 子元素縮小比例，默認為1，當子元素多行時無效，
如果所有子元素的layout_flexShrink 值為1,空間不足時，都等比縮小，如果有一個為0，其他為1，空間不足時，為0的不縮小，負值無效。layout_alignSelf 子元素的對齊方式， 允許單個子元素有與其他子元素不一樣的對齊方式，可覆蓋 alignItems 屬性。默認值為auto，表示繼承父元素的 alignItems 屬性，如果沒有父元素，則等同于stretch。
auto (default) 繼承父元素alignItems 屬性，父元素alignItems 屬性不存在則默認stretch
flex_start 同alignItems 的flex_start屬性
flex_end 同alignItems 的flex_end屬性
center 同alignItems 的cente屬性
baseline 同alignItems 的baseline屬性
stretch 同alignItems 的stretch屬性
layout_flexBasisPercent 子元素占父容器長度的百分比，覆蓋了子元素自身的layout_width或layout_height，前提是父容器的長度或者寬度設置了值，否則無效
**layout_minWidth / layout_minHeight ** 強制限定子元素的最小寬度或者最小高度，即使layout_flexShrink縮小比例，也會保證不小于子元素寬度或者高度的最小值
**layout_maxWidth / layout_maxHeight ** 強制限定子元素的最大寬度或者最大高度，即使layout_flexGrow放大比例，也會保證不大于子元素寬度或者高度的最大值
layout_wrapBefore 強制換行，即使父容器設置了flex_wrap=nowrap,依然將當前元素換到下一行的第一個元素顯示。
上面講到FlexboxLayout有兩個版本，內部測試版，添加了與Recyclerview的結合。
