怪异盒子，弹性盒子，多栏布局

Day29
1、 怪异盒子模型
Box-sizing:;
属性值：
Box-sizing:content-box; 常规盒模型
Box-sizing:border-box; 怪异盒模型（IE盒模型）

怪异盒模型：
触发怪异盒模型：
Box-sizing:border-box;

	怪异盒模型特点:padding盒border都会在元素的宽高的内部，不会把盒子撑大。

2、 弹性盒子
弹性盒子：布局方案
作用：控制理他最近的一层子元素的布局方式；
特点：
a. 弹性盒子里面的离他最近的一层子元素都可以添加大小；
b. 如果向让弹性盒子里面的一个子元素（唯一子元素）左右上下居中，只需要给子元素添加margin:auto;即可；
c. 弹性盒自里面的子元素都是沿着“主轴“排列；主轴有可能是X轴也有可能是Y轴。如果X轴为主轴，Y轴就是侧轴；
注：默认情况下X轴为主轴。

1. 触发弹性盒子：
   Display:flex;

2. 改变主轴方向：
   Flex-direction:;
   属性值：
   Row （默认值）X轴为主轴
   Column Y轴为主轴
   Column-reverse 以Y轴为主轴反向排列
   Row-reverse 以X轴为主轴反向排列

3. 改变主轴的对齐方式
   Justify-content:;
   属性值：
   Flex-start 默认状态；在弹性盒子开始的地方对齐
   Flex-end 在弹性盒子末端对齐
   Center 居中对齐
   Space-between 两端对齐
   Space-around 自动平均分配间距

4. 侧轴对齐方式：
   Align-items:;
   Flex-start 侧轴开始的位置
   Flex-end 侧轴结束的位置
   Center 侧轴居中
   Baseline 基线（flex-start等效）
   Stretch 拉伸

5. 控制弹性盒子里面的子元素（灵活元素）换行处理
   Flex-wrap:;
   Wrap 换行
   Nowrap 不换行
   Wrap-reverse 反向换行

6. 控制行与行的对齐方式：
   Align-content:;
   Flex-start 默认状态，。航宇航之间不存在默认的行间距
   Flex-end 在弹性盒子末端对齐
   Center 居中对齐
   Space-between 两端对齐
   Space-around 自动分配间距

7. 补充 flex-direction 和 flex-wrap简写
   Flex-flow:;

   注：以上7个属性全部添加在父元素弹性盒子上面！！！！！！！
   

   添加在子元素上的属性：

8. 控制弹性盒子里面某个灵活元素在侧轴的对齐方式：
   Align-self：
   Auto 默认值。元素继承了他的父容器的align-items属性，如果没有，父容器则为“stretch“。
   Stretch 元素被拉伸以适应容器
   Center 元素位于容器的中心
   Flex-start 元素位于容器的开头
   Flex-end 元素位于容器的结尾

9. 控制子元素的排列顺序
   Order:; 数值越大越往后排列。支持负值

10. 剩余空间的分配
    Flex:1; 分配主轴剩余空间。

11. Flex-XXX
    flex-grow
    一个数字，规定项目将相对于其他灵活的项目进行扩展的量。
    flex-shrink
    一个数字，规定项目将相对于其他灵活的项目进行收缩的量。
    flex-basis
    项目的长度

3、 多列布局
a. 列数
Column-count:;
b. 列间距
Column-gap:;
c. 列分割线
Column-rule:;
d. 控制每一行的列的高度是否统一
Column-fill:;
Auto 列高度自适应内容
Balance 列的高度以其中最高的一列统一（默认）
e. 跨列
Column-span:all;
f. 列宽
Column-width:; 和列数存在一定的冲突
g. Columns:7;
Column-count 和column-width 的简写