CSS的Flex布局其实没那么难

flex基于水平和垂直的两条基准线进行布局。

TIM图片20170720222507.jpg

理解了这一点剩下的看文档就好了~

水平轴

默认的flex布局是按水平轴排列元素的。

常用的属性有：

justify-content

flex-start：水平左对齐
flex-end：水平右对齐
center：水平居中
space-between：内空隙
space-around：环绕空隙

1.png

配合margin-left:auto或者margin-right:auto可以实现水平左右对齐(都设置就两边自动对齐)

垂直轴

常用的属性有：

align-items

flex-start：垂直左对齐
flex-end：垂直右对齐
center：垂直居中
stretch：拉伸
baseline：对准基线

2.png

align-self

只作用于自身，值和align一样

其它

flex-direction:在父元素里设置,控制flex排列风格，比如column(按列排列)和column-reverse(反方向按列排列),默认是row(按行排列)
order:在子元素里设置,控制元素次序
flex-wrap:在父元素里设置，可以设置warp(换行)也可以nowrap(不换行)
align-content:在父元素里设置，配合flex-wrap使用，作用是对齐flex盒子的行(就是和line-height相关的那个行)
flex-flow:flex-direction和flex-wrap的复合写法
flex-grow:在子元素里设置,规定元素扩展的量。
flex-shrink:在子元素里设置,规定元素收缩的量。

官方文档

https://www.w3.org/TR/css-flexbox-1/