Flex（Flexible Box）意为"弹性布局"，无论是块级元素还是行内元素都可使用Flex布局
采用Flex布局的元素称为Flex容器（flex container），容器默认有两根轴，水平的主轴（marin axis）和垂直的交叉轴（cross axis）
默认是水平主轴，子元素沿着主轴从左到右排列
容器的六个属性
flex-direction 属性决定主轴的方向，有四个值
row //默认值，主轴为水平方向，起点在左边
row-reverse //反转，主轴水平方向，起点右边
column //主轴为垂直方向，起点再上边
column-reverse //主轴垂直方向，起点下边
flex-wrap flex容器默认是将所有子元素（也叫项目 flex item）在同一行显示，此属性用于换行，有三个值
nowrap //默认，不换行
wrap //换行，排不下的会被挤到下面
wrap-reverse //换行，排不下的会被挤到上面
flex-flow 属性是为了将 flex-direction 和 flex-wrap 合并起来书写
flex-flow:<flex-direction> || <flex-wrap> //默认值为row nowrap
justify-content 属性用于定义子元素在主轴上的对齐方式
flex-start //默认值，左对齐
flex-end //右对齐
center //居中
space-between //两端对齐，子元素间间隔相等
space-around //每个子元素两侧的间隔相等
align-items 属性定义子元素在垂直方向如何对齐，也就是把主轴进行垂直移动
flex-start //交叉轴的起点对齐，也就是顶部对齐
flex-end //交叉轴终点对齐，也就是底部对齐
center //交叉轴中点对齐，居中
baseline //按容器第一行文字的基线对齐
stretch //默认值，顶部和底部都对其，如果子元素没高度，则会被拉长
justify-content:center 和 align-items:center 组合使用可实现子元素水平和垂直居中
align-content 属性定义多根轴线的对齐方式，如果容器只有一根轴线，则此属性无效
flex-start //与交叉轴起点对齐
flex-end //与交叉轴终点对齐
center //与交叉轴中点对齐
space-between //与交叉轴两端对齐，轴线间间隔相等
space-around //每根轴线两侧间隔相等
stretch //轴线占满整个交叉轴
项目六个属性
单个项目占据的主轴空间叫main size，占据的交叉轴空间叫cross size
order 属性定义项目的排列顺序，数值小的在前头，默认值为0，可为负数
flex-grow 属性定义项目的放大比例，默认值为0，即存在剩余空间也不放大，如果所有项目都为1，则等分剩余空间，如果一个项目为2，其他为1，则前者占据剩余空间会比其他项多一倍
flex-shrink 属性定义项目缩小比例，默认为1，如果所有项目都为1，当空间不足时，都将等比例缩小。如果一个项目为0，其他项目都为1，则空间不足时，前者不缩小，负值对该属性无效
flex-basis 属性用于设置项目的宽度，默认值为auto
flex 属性是flex-grow、flex-shrink和flex-basis的简写，默认值为0 1 auto，建议优先使用此属性，单独写三个属性的话还要让浏览器去推算相关值
flex:1 //相当于flex:1 1 auto
align-self 属性，容器的align-item用于定义项目的垂直对齐方式，而align-self让单个项目有自己的垂直对齐方式
默认值为auto，表示继承父元素的align-items属性，没父元素则等同于stretch，align-self属性有6个值，除了auto，其他都与align-items的完全一样
设为Flex布局后子元素的float、clear和vertical-align属性会失效
参考资料
阮一峰老师的 Flex布局教程