Google在前些天新开源了一个Android项目：FlexboxLayout。带着好奇心，我也对FlexboxLayout一探究竟。
Flexbox是在Css3中出现的Style样式，用于定义一个可伸缩的盒子模型布局。它有以下几个特点：
（1）Flexbox是布局模块，而不是一个简单的属性，它包含父元素和子元素的属性。
（2）布局的主体思想是元素可以改变大小以适应可用空间，当可用空间变大，Flex元素将拉伸大小以填充可用空间，当Flex元素超出可用空间时将自动缩小。总之，Flex元素是可以让你的布局根据浏览器的大小变化进行自动伸缩。
以上就是在CSS3中Flexbox的两个主要特点。
那么Google也想，是不是同样可以仿照CSS3中Flexbox效果实现于Android布局呢？所以FlexboxLayout就此诞生。
首先，我们来看一张图（此图来源自：详解CSS3弹性盒模型（Flexbox））
从上图可以看到，布局非常类似LinearLayout在为子元素设置了weight情况下的效果。左对齐、右对齐、居中对齐、等比例排布、间隔排布等等。其实FlexboxLayout要比LinearLayout所实现的效果还要强大，还记得鸿洋大神写过的一个FlowLayout 流式布局吗？没错，用FlexboxLayout同样可以轻松实现这样的效果（比如，搜索结果Tag标签等等。。）
ok，下面进入主题。
1.引用方式：
在项目的gradle中直接引用：
compile 'com.google.android:flexbox:0.1.2'
2.使用方式：
使用方式和大部分Android提供的widget大同小异，即xml布局使用和代码中使用。
（1）XML布局：
（2）代码中使用：
接下来，我们来看看FlexboxLayout所具有的属性：
<?xml version="1.0" encoding="utf-8"?>
<resources>
<declare-styleable name="FlexboxLayout">
<!-- flexDirection: 项目的排列方向,类似 LinearLayout 的 vertical 和 horizontal -->
<attr name="flexDirection">
<enum name="row" value="0"/> <!-- 水平方向，起点在左端 -->
<enum name="row_reverse" value="1"/> <!-- 水平方向，起点在右端 -->
<enum name="column" value="2"/> <!-- 垂直方向，起点在左端 -->
<enum name="column_reverse" value="3"/> <!-- 垂直方向，起点在右端 -->
</attr>
<!-- flexWrap: 默认情况下 Flex 跟 LinearLayout 一样，都是不带换行排列的，但是flexWrap属性可以支持换行排列 -->
<attr name="flexWrap">
<enum name="nowrap" value="0"/> <!-- 不换行 （默认） -->
<enum name="wrap" value="1"/> <!-- 正方向换行 -->
<enum name="wrap_reverse" value="2"/> <!-- 反方向换行 -->
</attr>
<!-- justifyContent: 对齐方式 -->
<attr name="justifyContent">
<enum name="flex_start" value="0"/> <!-- 左对齐 -->
<enum name="flex_end" value="1"/> <!-- 右对齐 -->
<enum name="center" value="2"/> <!-- 居中 -->
<enum name="space_between" value="3"/> <!-- 两端对齐，View之间的间隔都相等 -->
<enum name="space_around" value="4"/> <!-- View两侧的间隔相等。所以，View之间的间隔比View距离边界的间隔大一倍。 -->
</attr>
<!-- alignItems: View在Y轴上的对齐方式 -->
<attr name="alignItems">
<enum name="flex_start" value="0"/> <!-- Y轴的起点对齐 -->
<enum name="flex_end" value="1"/> <!-- Y轴的终点对齐 -->
<enum name="center" value="2"/> <!-- Y轴的中心对齐 -->
<enum name="baseline" value="3"/> <!-- View中的第一行文字的基线对齐 -->
<enum name="stretch" value="4"/> <!-- 如果View未设置高度或设为auto，将占满整个容器的高度 -->
</attr>
</declare-styleable>
<!-- 控制子元素的属性 -->
<declare-styleable name="FlexboxLayout_Layout">
<!--
默认情况下子元素的排列方式按照文档流的顺序依次排序，
而order属性可以控制排列的顺序，负值在前，正值在后，按照从小到大的顺序依次排列。
我们说之所以 FlexboxLayout 相对LinearLayout强就是因为一些属性比较给力，order就是其中之一。
-->
<attr format="integer" name="layout_order"/>
<!-- 定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
跟 LinearLayout 中的weight属性一样
layout_flexGrow 属性都为1，则它们将等分剩余空间（如果有的话）。
如果一个项目的 layout_flexGrow 属性为2，其他项目都为1，则前者占据的剩余空间将比其他项多一倍。
-->
<attr format="float" name="layout_flexGrow"/>
<!--
定义了项目的缩小比例，默认为1，即如果空间不足，该项目将缩小。
如果所有项目的 layout_flexShrink 属性都为1，当空间不足时，都将等比例缩小。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。
负值对该属性无效。
-->
<attr format="float" name="layout_flexShrink"/>
<!--
定义了在分配多余空间之前，子元素占据的main size主轴空间.
浏览器根据这个属性，计算主轴是否有多余空间。它的默认值为auto，即子元素的本来大小。
-->
<attr format="fraction" name="layout_flexBasisPercent"/>
<!--
允许单个子元素有与其他子元素不一样的对齐方式，可覆盖 alignItems 属性。
默认值为auto，表示继承父元素的 alignItems 属性，如果没有父元素，则等同于stretch。
该属性可取6个值，除了auto，其他都与align-items属性完全一致。
-->
<attr name="layout_alignSelf">
<enum name="auto" value="-1"/>
<enum name="flex_start" value="0"/>
<enum name="flex_end" value="1"/>
<enum name="center" value="2"/>
<enum name="baseline" value="3"/>
<enum name="stretch" value="4"/>
</attr>
</declare-styleable>
</resources>
ok，关于FlexboxLayout基本的介绍就到这里，更详细的介绍可以看这篇文章：http://mp.weixin.qq.com
大家可以在自己的项目中尽情使用啦！