经典教程
Flex 布局教程：语法篇
Flex 布局教程：实例篇
flex布局游戏
理解
flex布局实现需要至少两层控件,外层叫做容器,内部的叫做项目(item).类似于Android里的ViewGroup和里面装的View。
容器分两个轴,水平的主轴（main axis）和竖直方向的交叉轴（cross axis）,就相当于盒子模型中的xy轴,或者android中的xy轴.
基本的布局原则
不像安卓里有那么多的定义好了布局规则的ViewGroup，比如RelativeLayout，Linearlayout，以及Listview，GridView等，flex布局的名字就只有这一种（display: flex;），它是通过容器的一些属性来控制具体的布局规则的。
那么如何确定布局规则呢？
容器上的属性
第一步，确定众多的item是横向排列还是纵向排列：
flex-direction：
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
第二步：一行或者一列放不下，怎么办？怎样换行或换列？
flex-wrap: nowrap | wrap | wrap-reverse;
flex-wrap.png
前面两个属性的简写形式：flex-flow
flex-flow: <flex-direction> || <flex-wrap>;
第三步：每个item之间在主轴方向上（flex-direction所确定的方向）以什么方式对齐？
justify-content:
flex-start（默认值）：左对齐
flex-end：右对齐
center： 居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
justify-content.png
第四步：每个item在交叉轴方向上以什么方式对齐？
align-items:
flex-start：交叉轴的起点对齐。
flex-end：交叉轴的终点对齐。
center：交叉轴的中点对齐。
baseline: 项目的第一行文字的基线对齐。
stretch（默认值）：如果项目未设置高度或设为auto，将占满整个容器的高度。
align-items.png
第五步：多行或者多列时（多根轴线），轴线和轴线之间的对齐方式
align-content: flex-start | flex-end | center | space-between | space-around | stretch;
align-content.png
每个item的属性
1.排列顺序：order，数值越小，排列越靠前，默认为0。
一般情况下，控件一个个写过去，没什么可说的，但有时想把后面的一个控件显示到前面，或者把前面的一个控件显示在最后，就需要这个了
2.大小/宽高的控制：
2.1项目的大小：flex-basis
flex-basis: length | auto; /* default auto */
2.2 当项目多时，我这个项目怎么缩小：flex-shrink
2.3 当项目少时，本项目怎么放大：flex-grow
flex.png
flex-2.png
注：flex-shrink和flex-grow有点类似于安卓中线性布局的weight。
缩写形式：flex
flex: none | [ <'flex-grow'> <'flex-shrink'>? || <'flex-basis'> ]
该属性有两个快捷值：auto (1 1 auto) 和 none (0 0 auto)。
3.对齐方式，可以覆盖容器上规定的对齐规则。
类似于Android中母布局中gravity与子布局中layout-gravity的关系。这里的相关属性值可以类比Android中相对布局中子view 定位的相关属性。
align-self: auto | flex-start | flex-end | center | baseline | stretch;
align-self.png
