Flexbox 布局是CSS3中一种新的布局模式，用于改进传统模式中标签对齐、方向、以及排序等等缺陷
浏览器支持情况:http://caniuse.com/#feat=flexbox
1. 开始使用
//块flex元素
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
</div>
css
.container {
display: flex;
display: -webkit-flex; //Safari
}
http://o9xap42x4.bkt.clouddn.com/flex1.png
//行内flex元素
<div class="container">
<div class="item">item1</div>
<div class="item">item2</div>
</div>
<span>hello flexbox</span>
css
.container {
display: inline-flex;
display: -webkit-inline-flex; //Safari
}
http://o9xap42x4.bkt.clouddn.com/flex2.png
2. 主轴和侧轴
http://o9xap42x4.bkt.clouddn.com/flex3.png
3. flex-direction/-webkit-flex-direction 更改主轴方向
row: 默认值，从左到右，从上到下
http://o9xap42x4.bkt.clouddn.com/flex22.png
row-reverse: 主轴起点和终点交换位置 ， 从右往左
http://o9xap42x4.bkt.clouddn.com/flex44.png
column: 主轴与侧轴交换
http://o9xap42x4.bkt.clouddn.com/flex55.png
column-reverse: 和column一样，方向相反
http://o9xap42x4.bkt.clouddn.com/flex66.png
4. justify-content/-webkit-justify-content 主轴对齐
flex-start(默认)：左对齐
http://o9xap42x4.bkt.clouddn.com/flexa1.png
flex-end：右对齐
http://o9xap42x4.bkt.clouddn.com/flexa2.png
center：居中
http://o9xap42x4.bkt.clouddn.com/flexa3.png
space-between： 两端对齐，item之间的间隔都相等
http://o9xap42x4.bkt.clouddn.com/flexa4.png
space-around：每个item两侧间隔相等
http://o9xap42x4.bkt.clouddn.com/flexa5.png
5. align-items/-webkit-align-items 侧轴对齐
flex-start
http://o9xap42x4.bkt.clouddn.com/2161.png
flex-end
http://o9xap42x4.bkt.clouddn.com/2162.png
center
http://o9xap42x4.bkt.clouddn.com/2163.png
baseline: 以项目的第一行文字的基线对齐
http://o9xap42x4.bkt.clouddn.com/2164.png
stretch(默认值): 当container不设置默认高度时，自动填满整个窗口的高度
http://o9xap42x4.bkt.clouddn.com/2165.png
6. flex-wrap/-webkit-flex-wrap 伸缩行换行
nowrap(默认)：不换行
http://o9xap42x4.bkt.clouddn.com/2166.png
wrap: 换行，第一排在上方，依次往下
http://o9xap42x4.bkt.clouddn.com/2167.png
wrap-reverse: 换行，第一排在下方，依次往上
http://o9xap42x4.bkt.clouddn.com/2168.png
7. align-content/-webkit-align-content : 堆栈伸缩行，更改的flex-wrap的行为，对齐的不是项目，而是由flex-wrap产生的伸缩列
stretch(默认): 轴线占满整个交叉轴
http://o9xap42x4.bkt.clouddn.com/2169.png
flex-start: 与交叉轴起点对齐
http://o9xap42x4.bkt.clouddn.com/21610.png
flex-end: 与交叉轴终点对齐
http://o9xap42x4.bkt.clouddn.com/21611.png
space-around: 每根轴线两侧距离都相等
http://o9xap42x4.bkt.clouddn.com/21612.png
space-between：两端对齐
http://o9xap42x4.bkt.clouddn.com/21613.png
8. flex-flow/-webkit-flex-flow：伸缩方向与换行, flex-direction flex-wrap 的缩写
flex-flow: [flex-direction] [flex-wrap]
上面介绍的都是父容器的一些属性，下面开始介绍一下flex item 的属性
9. flex-item 伸缩项目的属性
order: 显示排列顺序，数值越小，排列越前，默认都为0
http://o9xap42x4.bkt.clouddn.com/21614.png
margin: 外边距
margin-right: auto
http://o9xap42x4.bkt.clouddn.com/21615.png
margin: auto
http://o9xap42x4.bkt.clouddn.com/21616.png
align-self: 侧轴对齐，属性和align-items一样，会覆盖父容器的align-items属性
http://o9xap42x4.bkt.clouddn.com/21617.png
flex: [number]：该数字用于指定该项目所占用剩余空间比例
http://o9xap42x4.bkt.clouddn.com/21618.png
http://o9xap42x4.bkt.clouddn.com/21619.png
