flex布局

父元素

设置display：flex;

** 1）：flex-direction **
规定盒子容器主轴方向，可以是水平方向和垂直方向，另外侧轴一定是垂直于主轴方向的。

flex-direction: row 从左向右排序     

flex-direction:row-reverse;从右向左排序

flex-direction:column; 主轴垂直方向 从上往下排序 

flex-direction：column-reverse; 主轴垂直方向 从下往上排序 

** 2）：flex-wrap **
规定flex容器主轴上放不下项目的时候，要不要进行换行，以及怎么换行。

 flex-wrap:wrap 主轴排不下时进行顺序换行

flex-wrap:wrap-reverse；讲下面一行放到上面

flex-wrap:nowrap； 禁止换行

**3）：flex-flow **
前面两个属性的集合，可以一并设置主轴和换行的属性。

**4）：justify-content **
控制了项目在flex容器主轴方向上的对齐方式。

justify-cintent: flex-start: 沿着主轴方向的起始点到终点依次进行紧密排序，类似word中的左对齐。

justify-content: flex-end; 类似于word里面的右对齐

justify-content:center; 类似于word里面的居中对齐

justify-content:space-around;  容器中每一项等比例排序

justify-content:space-between; 容器中每一项等比例排序，但是两端对齐 

详情： http://www.runoob.com/try/playit.php?f=playcss_justify-content&preval=space-around

**5）：align-items **
控制了项目在flex容器侧轴（竖轴）方向上的对齐方式。

 align-items:flex-start；从侧轴的起点开始进行布局。flex容器内项目紧紧贴住容器侧轴的起始位置（有margin之类的值，会导致出现空缺，符合逻辑）。

align-items:flex-end; 从侧轴的结束位置开始进行布局。flex容器内项目紧紧贴在容器侧轴的结束位置（有margin之类的值，会导致出现空缺，符合逻辑）。

align-items:flex-center;侧轴方向居中对齐的布局的样式。flex容器内项目距离侧轴起点和侧轴终点的距离相等。

align-items:flex-stretch;侧轴方向的空间将被整个项目所充满

注：当然要想stretch能起到作用，要满足的条件是（这里的条件仅在主轴是水平方向适用）：1、flex容器高度最好是一个固定值；2、容器内部项目不要设置高度（这个高度由强大的浏览器来进行计算）。 如下图所示：每一个item高度都不是固定值。

align-items:flex-baseline； 基准线对齐；

注： 这里的基准线要想有效果，需要满足这么个条件：1、item项目内部最好有内容；2、item项目内部的lineheight属性需要设置。那么满足这样的条件后，基准线就是lineheight值最大的那个项目作为基准线。

详情： http://www.runoob.com/try/playit.php?f=playcss_align-items&preval=flex-start

**6）：align-content **项目在多跟轴线上的对齐方式，如果只有一根轴线则不起作用

与justify-content类似  不过这个是设置侧轴的对齐方式；

align-content:flex-start;  多行项目整体对齐到侧轴顶部   每一行之间没有间隔

align-content:flex-end;  多行项目整体对齐到侧轴底部   每一行之间没有间隔

align-content:center;    多行项目作为一个整体， 上下居中， 即距离侧轴的起点和距离侧轴的终点距离相同

align-content:space-around;  多行项目的每一项等比例排序

align-content:space-between;  两端对齐布局，项目内部每行之间的距离都相等

详情： http://www.runoob.com/try/playit.php?f=playcss_align-content&preval=stretch

子元素

order;  容器内子项目的前后排列顺序。order属性只接受整数属性值。越小item项目排列顺序越靠前。

其它属性性情： http://www.runoob.com/cssref/css3-pr-order.html

flex:1;

http://www.runoob.com/cssref/css3-pr-flex.html