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