flex布局篇（一）

本文原创地址链接：http://blog.csdn.net/zhou_xiao_cheng/article/details/52894859，未经博主允许不得转载。
flex布局是一种十分强大的布局方式，使用它可以轻松完成绝大部分的网页布局工作，可以说，只要掌握了flex布局，你就可以在布局中游刃有余了。
当然，学习一种布局方式，了解关于它的一些基本知识是很有必要的，这样可以方便你以后更加系统透彻地掌握它，而不是仅仅简单地使用它。
如下图所示，蓝色部分的元素就是一个容器，设置了它的布局方式为flex（display: flex）后，就变成了flex容器，而该元素的所有子元素就全部自动变成了flex项目（如图中的红色部分）。flex容器默认有两根轴： 主轴与纵轴，默认的主轴为水平方向 & 从左往右，纵轴为垂直方向＆从上往下，下面所讲述的内容，均建立在flex容器默认主轴的基础上。

接着，你只要记住下面这两点:

1. 设置在flex容器上面的属性：

设置主轴的方向：row(水平向右)，row-reverse(水平向左)，column(垂直向下)，column-reverse(垂直向上)。

 flex-direction: row(默认值) | row-reverse | column | column-reverse

flex项目一般都沿着一条轴线排列，这个属性设置当一条轴线排不下的时候，项目怎么换行： nowrap(不换行) ，wrap (往下换行)，wrap-reverse(往上换行)。

 flex-wrap: nowrap(默认值) | wrap | wrap-reverse

设置flex项目在主轴上的对齐方式： flex-start(左对齐) ，flex-end(右对齐)，center (居中对齐)， space-between(两端对齐)，space-around(flex项目两侧间隔相等)

 justify-content: flex-start(默认值) | flex-end |  center | space-between | space-around

设置flex项目在纵轴上的对齐方式： flex-start(上对齐) ，flex-end(下对齐)，center (居中对齐)，baseline(以flex项目的第一行文字底部对齐)，stretch(如果flex项目高度为auto | 没有设置高度，那么占满flex容器的高度)

 align-items: flex-start(默认值) | flex-end | center

flex-direction与flex-wrap的简写,按序赋值就好。

 flex-flow: row nowrap(默认值) | ...

这个属性没怎么用过，设置多根轴线在纵轴上的对齐方式。

 align-content： stretch(默认值) | flex-start | flex-end |  center | space-between | space-around

2. 设置在flex项目上的属性：

当轴线上存在多余空间时，设置flex项目的扩大比例，默认值为0，即不扩大，扩大值还可取任意正数。

 flex-grow: 0(默认值) | 任意正数

当轴线上空间不足时，设置flex项目的缩小比例，默认值为1，即自动缩小，缩小值还可取0和任意正数。

 flex-shrink: 1(默认值) | 0 | 任意正数

重新分配轴线上的空间之前，该flex项目所占据的空间，默认值为auto，即它本身大小。

 flex-basic:  auto(默认值) | 任意表示大小的值

设置单个flex项目与其它项目不同的对齐方式，会覆盖flex容器的align-items的值，默认值为auto,即flex容器的align-items属性的值是什么，这个flex项目在纵轴上的对齐方式就是什么，其它值的解释与align-items的值相同。

 align-self: auto(默认值) | flex-start | flex-end |  center | baseline | stretch

设置项目的排序循序，数值小的在前，大的在后。

 order: 0(默认值) | 整数值

flex-grow、flex-shringk与flex-basic的简写,按序赋值就好，后面两个属性值为可选。

 flex：0 1 auto(默认值) | ...

实践出真知，接下来反复地敲代码，直到把它们全部理解，并深深地印在你的脑子里为止，相信每天的一小步，终将让你有一天绽放属于自己的辉煌。

参考资料： http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html