之前一直都是使用position来定位块的位置。现在新学了一个比较主流的flex来定位块的位置。感觉确实比之前的好多了。
现在总结下大概的用法。
flex是把一个div分成主轴和交叉轴，其中主轴方向的定位有三个。
1.flex-direction：这个是决定主轴的方向。
row(从左到右) |row-revers(从右到左)|column(从上到下)|column-revers(从下到上)。
2.flex-wrap：决定是否换行，怎么换行。
nowrap(不换行)|wrap(换行)|wrap-revers(从下向上换行)。
3.justify-content：主轴方向上的对齐方式。
flex-start(对主轴开始对齐)|flex-end(对主轴结束对齐)|flex-content(居中)|space-between(两端对齐，中间的间隔平分)|space-around(间隔平分)。
交叉轴有六个属性：
1.align-items：决定交叉轴上的方向，不是对齐方式。
flex-start(对交叉轴开始对齐)|flex-end(对交叉轴结束对齐)|flex-content(居中)|baseline(按项目中的文字基线来对齐)|stretch(默认值，如果没有写项目高度会默认和块元素等高)。
2.align-content：交叉轴上的对齐方式。
flex-start(对主轴开始对齐)|flex-end(对主轴结束对齐)|flex-content(居中)|space-between(两端对齐，中间的间隔平分)|space-around(间隔平分)|stretch(所有的项目平分块的高度)
3.order：项目的排列顺序
order:num。num越小排越前面。
4.flex-grow：是否填充剩余的空间
flex-grow:num。是否填充剩余的空间，默认是0，不填充，为1的话等大小填充。
5.flex-shrink：是否缩小剩余的空间
flex-shrink:num。是否缩小，默认是0，不缩小，为1的话等大小缩小。
6.align-self：采用单独的对齐方式。
同时推荐阮一峰的flex教程，很详细。
1.Flex 布局教程：语法篇(http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html)
2.Flex 布局教程：实例篇(http://www.ruanyifeng.com/blog/2015/07/flex-examples.html)
