怪异盒模型：
触发怪异盒模型： box-sizing: border-box;
怪异盒模型的特点：padding和border都会在元素的宽高内部
弹性盒模型：
弹性盒子：布局方案。
作用：控制离他最近的一层子元素，布局方式
特点：（1）弹性盒子里边的离他最近的一层子元素都可以添加大小
（2）如果想让弹性盒子里面的一个子元素左右上下居中，只需要给子元素添加margin： auto即可
（3）弹性盒子里面的子元素都是沿着“主轴”排列。主轴有可能是x轴也有可能是y轴，如果x轴是主轴，y轴就是侧轴。｛注：默认情况下x轴为主轴｝
1触发弹性盒子： display： flex；
2改变主轴的方向：flex-direction：
属性值： row（默认值X为主轴） column（Y轴为主轴） row-reverse（以X轴为主轴反向排列） column-reverse（以Y轴为主轴反向排列）
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：；
注以上七个属性全部添加在父元素弹性盒子上面！！！
添加在子元素上面的属性：
1控制弹性盒子里面某个 灵活元素 在侧轴的对齐方式。
align-self：
auto 默认值，元素继承了它的父容器的 align-items 属性。如果没有父容器则为 “stretch”。
stretch 元素被拉伸以适应容器
center 元素位于容器的中心
flex-start 元素位于容器的开头
flex-end 元素位于容器的结尾
2控制子元素的排列顺序：
order：数值越大越往后排列，支持负数
3剩余空间的分配：
flex ：1； 分配主轴剩余空间
flex-grow:; 扩展的量
flex-shrink:; 收缩的量
flex-basis:; 元素的大小
记住：flex-shrink:0; 不压缩。
多列属性：
1：列数：
column-count:;
2:列间距：
column-gap:;
3:列分割线：
column-rule:
4:制每一列的列的高度是否统一：
column-fill:;
auto 列高度自适应内容
balance 有列的高度以其中最高的一列统一
5:跨列：
column-span:all;
6:列宽
column-width:
7:columns: 7
column-count 和 column-width 简写
1661
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
