flex布局

flex布局原理:  就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

常见父项属性：

flex-direction：设置主轴的方向

row，column，row-reverse（从右到左），column-reverse（从下到上）

justify-content：设置主轴上的子元素排列方式

lex-start（默认，从头部开始排列），flex-end，center（在主轴居中对齐），space-around（平分剩余空间），space-between (先两边贴边，再平分剩余空间）

flex-wrap：设置子元素是否换行

nowrap（默认，不换行），wrap（换行）

align-content：设置侧轴上的子元素的排列方式（多行）（只能用于子项出现换行的情况，单行没有效果）

flex-start，flex-end，center，space-around，space-between，stretch

align-items：设置侧轴上的子元素排列方式（单行）

flex-start：（默认），flex-end，center（挤在一起居中），stretch（拉伸）

flex-flow：复合属性，相当于同时设置了flex-direction和flex-flow

常见子项属性：

flex：份数

align-self：控制子项自己在侧轴上的排列方式

默认auto，表示继承父元素的align-items属性，如果没有父元素则等同于stretch

order属性定义项目的排列顺序

数值越小，排列越靠前，默认为0

注意：和z-index不一样