在父元素中设置display:flex就可以愉快的使用flex布局了。
1.flex-direction 元素的排列方式 (定义在父容器)
排列方式也决定了主轴或者交叉轴，如果元素是水平排列的，那么主轴就是水平方向的这条轴(类似于X轴)，这时交叉轴就是垂直方向的(Y轴)，反之亦然。
语法：flex-direction: row(默认) | row-reverse | column | column-reverse
flex-direction: row(默认) 水平向右 flex-direction：row-reverse 反向排列（水平向左） flex-direction：colum 竖向排列（垂直向下） flex-direction：colum-reverse 反向竖向排列（垂直向上） 2.justify-content 元素在主轴上的对齐方式
语法：justify-content: flex-start(默认值) | flex-end | center | space-between | space-around
justify-conten：flex-start(默认值) 沿着主轴开始的位置对齐 justify-conten：flex-end 在主轴结束位置对齐 justify-conten：space-between
这里把上面设置的margin值去掉了
justify-content: space-around 让元素两边都有相等的空间 justify-content: center 居中对齐 再来一张W3C的图直观感受一下 3.align-items 元素在侧轴(交叉轴)上的对齐方式
语法：align-items: stretch(默认值)| flex-start | flex-end | center | baseline
align-items: stretch(默认值，只有在没有设置高度时才有效)
让子盒子的高度拉伸显示（默认值）,只有当当盒子内的子元素没有高度时,才会默认拉伸
align-items: flex-start 侧轴开始位置对齐
align-items: flex-end 侧轴结束位置对齐
align-items: center 侧轴居中对齐 4.flex-wrap 子元素超出父容器时是否换行
在flex布局中，默认是单行显示的，如果子元素的宽度之和超出了父元素的宽度，默认会压缩显示，如果需要设置子元素换行显示，需在父元素身上使用属性 flex-wrap
了解其中两个即可
属性描述nowrap不换行(默认值)wrap换行5.flex-flow (flex-direction 和 flex-wrap 的简写) 如：让元素竖向排列，必要时换行,可以简写为flex-flow: column wrap;
6.align-content 多行侧轴对齐方式
语法align-content: flex-start | flex-end | center | space-between | space-around | stretch，取值效果可参考align-items的取值效果，基本一样
之前align-items只是针对于单行的侧轴对齐方式，如果超出一行使用这个属性就无效了。
比如页面中有10个像刚才的红色div,我们想让让它们在主轴和侧轴的开始方向对齐(可理解为屏幕左上角)
flex-direction: row; /*排列方向(默认值)*/ justify-content: flex-start;/*主轴开始方向对齐(默认值)*/ align-items: flex-start;/*在侧轴开始方向对齐*/ flex-wrap: wrap;/*换行*/用align-items：flex-start的话会显示这样 这显然不是我们想要的效果，把align-items：flex-start换成align-content: flex-start;就达到我们想要的效果了 7.order属性(设置在子元素身上)
设置弹性盒子中子元素的排列顺序，数值越小，排列靠前，默认都是0
刚才的红色div正常显示如下图 在它们身上分别加上order属性，效果如图 8.align-self(设置在子元素身上)
单个子元素侧轴对齐方式(和align-items取值一样)
我们在刚才的基础上分别在div加上align-self这个属性，效果如下图 9.flex 可理解为份数
按照份数分配父元素主轴（宽度）的剩余空间
