1.常用的父级属性 flex-direction：设置主轴的方向 justify-conten：设置主轴上的子元素排列方式 flex-wrap：设置子元素是否换行 align-content：设置侧轴上的子元素排列方式（多行） align-items：设置侧轴上的子元素排列方式（单行） flex-flow：复合性，相当于同时设置flex-direction和flex-wrap
1.1.flex-direction设置主轴的方向： flex-direction：row默认值从左到右 flex-direction：row-reverse从右到左 flex-direction：column从上到下 flex-direction：column-reverse从下到上
1.2.justify-content设置主轴的子元素排列方式 定义项目在主轴上的对齐方式 注意：使用这个属性之前一定要确定好主轴是那个 justify-content:flex-start默认值从头部开始（如果主轴是x轴，则从左到右） justify-content:flex-end从尾部开始排列 justify-content：center在主轴居中对齐（如果主轴是x轴，则水平居中） justify-content:space-around平分剩余空间 justify-content:space-between先两边贴边，在平分剩余空间
1.3.flex-wrap设置子元素是否换行 默认情况下，项目都排在一条线（又称轴线）上，flex布局中默认是不换行的 flex-wrap:nowrap默认值，不换行 flex-wrap:wrap换行
1.4.align-items设置侧轴上的子元素排列方式（单行） 该属性是控制项在侧轴（默认是y轴）上排列方式， align-items：flex-start默认值，从上到下 align-items：flex-end从下到上 align-items：center挤在一起垂直居中 align-items：stretch拉伸
1.5.align-content设置侧轴上的子元素排列方式（单行） 设置子项在侧轴上的排列方式，并且只能用于子项出现换行的情况(多行)，在单行下是没有效果的 align-content:flex-start默认值，在侧轴的头部开始排列 align-content:flex-end在侧轴的尾部开始排列 align-content:conter在侧轴的中间显示 align-content:space-around子项在侧轴平分剩余空间 align-content:space-between子项在侧轴先分布在两头，在平分剩余空间 align-content:stretch设置子项元素高度平分父元素高度
1.6.flex-flow属性是flex-direction和flex-wrap属性复合属性
2.常用的子项属性 flex：子项目占的分数 align-self：控制子项在自己侧轴的排列方式 order：属性定义子项目分配剩余空间，用flex来表示占多少份
align-self控制子项自己在侧轴上的排列方式
align-self属性允许等那个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。 例如：span：nth-child（2）{ undefined align-self：flex-end 设置自己在侧轴上的排列方式
order属性定义项目的排列顺序
数值越小，排列越靠前，默认为0
注意：和z-index不一样
例如：span：nth-child（2）{
undefined
order：1；
设置自己的排列顺序
