弹性盒子模型

弹性盒就是自由伸缩的盒子，通常在移动端排版当中，适配屏幕是非常繁琐的事情，是因为各个终端屏幕和像素都不一样，弹性盒能够帮助我们快速适配各个不同的屏幕

弹性盒的主要属性:

弹性盒子的属性

1. display:flex; //将当前元素变成弹性盒
   inline-flex;
   -webkit-flex ;
   将盒子转化为弹性盒以后，那么盒子内的元素会默认排成一行;

2. 定义盒子内的元素的排列方向
   flex-direction:
   row:排成行，也是默认值;
   row-reverse:以相反的方向排成一行;
   column:排成列
   column-reverse：以相反的方向排成一列

3. 定义盒子内的子元素的对齐方式
   横向对齐: justify-content:
   flex- start默认的对齐方式，从第一个子元素开始对齐;
   flex- end:从最后一个子元素开始对齐;
   center:从中间位置对齐，平均分布
   space-between：两端对齐
   space-around：均分空白区域
   纵向对齐: align-items:
   flex- start:从第一个元素开始对齐，第一个子元素排列在父元素起始位置
   flex- end:从最后一个元素开始对齐，最后一个子元素排列在父元素结束位置
   center:从中间开始对齐
   baseline :从元素的基线对齐
   stretch:拉伸对齐

4. 规定子元素在父元素内是否换行
   flex-wrap：
   nowrap：不换行，一行显示，所以有可能溢出，默认值
   wrap：换行显示
   wrap-reverse：换行，但是以相反的顺序来排序
   initial：设置属性值为该属性的默认值
   inherit：继承父元素的属性值

5. 设置行的行为
   align-content :
   flex-start:项目位于父元素的开头
   flex-end:项目位于父元素的末尾
   center:项目位于父元素的中心
   space-between:项目位于父元素的两端，中间留有空白
   space-around :均分父元素的空白区域
   stretch:默认值，项目被拉伸来适应父元素

弹性盒内的子元素的属性

1. margin值
   居中的效果: margin: auto;
   等同于给父元素添加横向纵向都居中对齐
2. order:规定子元素的显示顺序
   order:
   默认值是0，负数向前，正数向后排列，
   如果同时添加多个order,那么数字小的排列在前面
3. flex:规定子元素所占据的空间
   flex:1,2,3,
4. align-self:覆盖父元素的align- items属性;
   auto:默认值，继承父元素的属性，如果父元素没有设置该属性，则为stretch;
   stretch:元素被拉伸以适应父元素
   center:元素位于父元素的中心
   flex-start :元素位于父元素的开始位置
   flex-end:元素位于父元素的额结束位置
   baseline:元素位于父元素的基线上