flex布局设置父路径: display:flex , 使用多个div横向排列；
一、flex容器属性
1、flex-direction属性，横向排列
row(默认) 横向排列
row-reverse 横向排列倒续
column 纵向排列
column-reverse 纵向排列倒续
2、flex-wrap属性 是否换行
nowrap(默认) 不换行
wrap 换行，项目不会等分容器宽度，而是根据自身宽度进行排列，如果超出父容器宽度则自然换行。
wrap-reverse 换行，需要注意的是第一排会紧贴容器底部，而不是我们想象的项目6紧贴容器顶部，效果与wrap相反。
3、flex-flow属性
flex-flow属性是flex-deriction与flex-wrap属性的简写集合，默认属性为row nowrap，即横向排列，且不换行，如果需要控制项目排列与换行，推荐使用此属性，而非单独写两个。
4、justify-content属性
flex-start(默认)
flex-end 右对齐
center 居中对齐
space-between 两端对齐
space-around 项目之间间距为左右两侧项目到容器间距的2倍
space-evenly 为项目之间间距与项目与容器间距相等，相当于除去项目宽度，平均分配了剩余宽度作为项目左右margin。
5、align-items属性
stretch(默认)
flex-start 贴容器顶部
flex-end 贴容器底部
center 中心位置排列
baseline 比较特殊，它让项目以第一行文字的基线为参照进行排列