经典教程

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