flex布局原理
（flex布局意思为弹性布局用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局） 父元素叫flex父容器 子容器叫flex项目 子容器可以横向排列，也可以纵向排列
1.当我们为父盒子设置为flex布局后，子元素的float、clear和vertical-align属性将失效。 2.伸缩布局=弹性布局=伸缩盒布局=弹性盒布局=flex布局
flex父项属性
1.flex-direction:设置主轴的方向
** 属性值：**
row 默认从左到右（x轴方向）
row-reverse 从右到左
column 从上到下（y轴）
column-reverse 从下到上
默认的是x轴（row）y轴就是侧轴，我们的元素时根据主轴来排列的
2.justify-content:设置主轴上的子元素的排列方式（要确定主轴是哪个）
**属性值**
flex-start 默认值从头开始，如果主轴是x轴，则从左到右
flex-end 从尾部开始排列
center 在主轴居中对齐（如果主轴是x轴则水平居中）
space-around 平分剩余空间
space-between 先两边贴边，在平分剩余空间（重要）
3.flex-wrap:设置子元素是否换行
默认情况下，项目都是在一条线上的，不会换行，除非设置这个属性，装不下会缩小子元素的宽度。
**属性**
nowrap 不换行
wrap 换行
4.align-content:设置侧轴上的子元素的排列方式（多行）
只能用于子项 换行 的情况（多行），在单行下是没有效果的
**属性**
flex-start 默认在侧轴的头部开始排序
flex-end 在侧轴的尾部开始排序
center 在侧轴中间显示
space-around 子项在侧轴平分剩余空间
space-between 子项在侧轴先分布在两头，在平分剩余空间
stretch 设置子项元素告诉平分元素高度
5.align-items:设置侧轴上的子元素排列方式（单行）
侧轴是相对的，主轴以外的就是侧轴
**属性**
flex-start 默认从上到下
flex-end 从下到上
center 挤在一起居中（侧轴垂直居中）
streth 拉伸 （但是子盒子不能给高度，会拉的和父容器一样高）
实现水平居中和垂直居中可以设置两个属性：
justify-content:center;主轴居中对齐
align-items:center； 侧轴居中对齐
6.flex-flow:复合属性，相当于同时设置了flex-direction和flex-wrap
**属性**
flex-flow:row wrap
flex布局子项常见属性
1.flex子项目占的份数
flex属性定义子项目分配剩余空间，用flex来表示占多少份数
2.align-self控制子项目自己在侧轴的排列方式
align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto,表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。
就是单独给自己在侧轴上设置排列方式
3.order属性定义子项的排列顺序（前后顺序）
数值越小，排列越靠前，默认为0
和z-index不一样
要设置的元素设置order：-1 (这个值随便写，默认是0，根据自己的需要写数值)
