弹性盒模型
标准盒模型：
宽高不包含内边距和边框，各自独立
怪异盒模型：
宽高包含内边距和边框
怪异盒模型触发方式：
1、丢失<!DOCTYPE html> 在IE678下触发
2、给元素添加box-sizing:border-box;
弹性盒布局：
display:flex;
display:inline-flex;
作用：控制子集在“主轴”上排列
设置方法：父元素设为弹性盒
父级为弹性盒时
子元素可以设置宽高
子元素居中，只需设置margin:auto;
子元素float、clear、vertical-align将失效
设置主轴
flex-direction:;
row 水平主轴
row-reverse 反向水平主轴
column 垂直主轴
column-reverse 反向垂直主轴
flex-wrap:;
no-wrap 不换行
wrap 换行
wrap-reverse 反向换行
综合写法：
flex-flow:设置主轴 是否换行;
flex容器属性：（给父级元素设置）
justify-content:; 子元素在主轴的对齐方式
flex-start 起始位置
flex-end 终点位置
center 居中
space-around 完全自动分配
space-between 两端对齐，中间自动分配
align-items:; 子元素在侧轴的对齐方式
flex-start 起始位置
flex-end 终点位置
center 居中
baseline 与文本基线对齐
stretch 默认位置对齐
align-content:; 多行元素在侧轴的对齐方式
flex-start 起始位置
flex-end 终点位置
center 居中
space-around 完全自动分配
space-between 两端对齐，中间自动分配
stretch 默认位置对齐
align-content在侧轴上执行样式的时候，会把默认的间距给合并。对于单行子元素，该属性不起作用
flex项目属性：（给子级元素设置）
align-self:; 子元素在侧轴上的对齐方式
flex-start 起始位置
flex-end 终点位置
center 居中
stretch 元素被拉伸以适应容器
auto 默认值。元素继承了它的父容器的align-items属性。如果没有父容器则为stretch
order:num; 项目的优先排列顺序，越大越靠后，默认为0，可以为负值
flex:; 数字不带单位
flex-grow:1; 定义项目进行扩张（放大）
flex-shink:1; 项目总宽度超过容器时的缩小设置
0，本身大小，不缩不放
1，默认，平均分配
>1，缩小倍数
flex-basis:; 项目的长度（px %）
综合写法：
flex:放大 缩小 长度; （后两个一般不写）