前言
工欲善其事必先利其器，学习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的结合。
