怪异盒模型和弹性盒模型

box-sizing：属性值
box-sizing：content-box；常规模型盒
box-sizing：border-box；怪异魔核形
怪异盒模型特点：padding和border都会在元素的宽高内部，不会把盒子撑大
弹性盒子：布局方案
作用：控制他最近的一层子元素，布局方式
特点：a，弹性盒子里面的离他最近的一层子元素都可以添加大小
b，如果想让弹性盒子里面的一个子元素左右上下居中，只需要给子元素添加margin：auto即可
c，弹性盒子里面的子元素都是沿着主轴排列 主轴：有可能是x轴也有可能是y轴，如果x轴为主轴，y轴就是侧轴
注：默认情况下x为主轴
一：触发弹性盒子：display：flex
二：改变主轴的方向：flex-direction：
属性值：row（默认值 x主轴）
column（y为主轴）
column-reverse（以y轴为主轴反向排列)
row-reverse（以x轴为主轴方向排列）
三：改变主轴的对齐方式：justify-content：
属性值：flex-start 默认状态：在弹性盒子开始的地方显示
flex-end 在弹性盒子末端对其
center 居中对齐
space-between 两端对齐
space-around 自动分配间距
四：侧轴的对齐方式：align-items：
属性值：flex-start 侧轴开始的位置
flex-end 侧轴结束的位置
center 侧轴居中的位置
baseline 基线（flex-start等效）
stretch(默认值) 拉伸
五：控制弹性盒子里面的子元素换行处理：flex-warp;
属性值：warp 换行
nowrap 不换行
wrap-reverse 反向换行
六：控制行与行的对齐方式：align-content：
属性值：flex-start 默认状态：行与行之间不存在默认的行间距
flex-end 在弹性盒子末端对齐
center 居中对齐
space-between 两端对齐
space-around 自动分配间距
添加在子元素上面的属性：
一：控制弹性盒子里面某个灵活元素在侧轴的对齐方式
align-self：
属性值：auto 默认值 元素继承了它的父元素的align-items 属性：如果没有父容器则为stretch
stretch 元素被拉伸适应容器
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
二：控制子元素的排列顺序：order：数值越大越往后排列 支持负数
三：剩余空间的分配：flex：1；分配主轴剩余空间
多列属性：1，列数：column-count：；
2，列间距：column-gap：；
3，列分割线：column-rule：；
4，控制每一列的列的高度是否统一：
column-fill：；
属性值：auto 列高度自适应内容
balance 有列的高度以其中最高的一列统一
5，跨列：column-span：all；
6，列宽：column-width：；
7，columns：是column-count和column-width 简写