Flexbox

哈，这次是拓展并提升一下css方面的知识点。
首先来，布局的传统解决方案，基于盒装模型，依赖 display 属性 + position属性 + float属性。
它对于那些特殊布局非常不方便，比如，【垂直居中】就不容易实现。
【方法：http://blog.csdn.net/wolinxuebin/article/details/7615098】

那么，就是有了Flex布局的引入（dang dang ~~dang,dang dang dang~~）

一：Flex布局是什么？
Flex是Flexible Box的缩写，任何一个容器都可以指定为Flex布局，能很好支持不同视口尺寸和设备。
二：内容？
属性与值：

• flex-direction      方向上     

 

1. row | row-reverse | column | column-reverse;

 

 

1. row（默认值）：主轴为水平方向，起点在左端；

 

1. row-reverse：主轴为水平方向，起点在右端；

 

1. column：主轴为垂直方向，起点在上沿；

 

1. column-reverse：主轴为垂直方向，起点在下沿。

 

• flex-wrap          换行

 

1. flex-wrap: nowrap | wrap | wrap-reverse;

 

 

1. 不换行；

 

1. 换行，第一行在上方；

 

1. 换行，第一行下方。

 

• flex-flow   概括了以上两点

 

1.  flex-flow: flex-direction | flex-wrap;

 

1.  flex-flow是flex-direction 和 flex-wrap的简写，默认值row 和 nowrap.

 

• justify-content  从左往右

 

1. justify-content: flex-start | flex-end | center | space-between | space-around;

 

 

1. 左对齐；

 

1. 右对齐；

 

1. 居中；

 

1. 两端对齐，元素之间的间隔都相等；

 

1. 每个元素两侧的间隔相等。所以，元素之间的间隔比元素与边框的间隔大一倍。

 

• align-items     有待琢磨

 

1. align-items: flex-start | flex-end | center | baseline | stretch;

 

• align-content     

 

1. align-content: flex-start | flex-end | center | space-between | space-around | stretch;

 

 

1. flex-start：与交叉轴的起点对齐。

 

1. flex-end：与交叉轴的终点对齐。

 

1. center：与交叉轴的中点对齐。

 

1. space-between：与交叉轴两端对齐，轴线之间的间隔平均分布。

 

1. space-around：每根轴线两侧的间隔都相等。所以，轴线之间的间隔比轴线与边框的间隔大一倍。

 

1. stretch（默认值）：轴线占满整个交叉轴。

 

• order :自我认为是在对元素进行排序，数值小就越靠前

eg:

 

 

效果：4231
其他知识点链接：http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html
三：缺点
兼容性坑爹...（移动端和PC端都很坑）