2020.0414弹性盒模型

知识总结

一、怪异盒模型
属性:Box-sizing:
属性值:content-box; 常规盒模型
Border-box; 怪异盒模型(IE盒模型)
怪异盒模型:怎么触发怪异盒模型？
答:给父元素添加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为主轴
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个属性全部添加在父元素弹性盒子上面！
添加在子元素上面的属性:
A:控制弹性盒子里面某个灵活元素在侧轴的对齐方式
Align-self:
属性值:auto 默认值，元素继承了它的父容器的align-items属性，如果没有父容器，则为”stretch”
Stretch 元素被拉伸以适应容器
Center 元素位于容器的中心
Flex-start 元素位于容器的开头
Flex-end 元素位于容器的结尾
B:控制子元素的排列顺序
Order:数值越大越往后排列，支持负值。
C:剩余空间的分配
Flex:1;分配主轴的剩余空间。
拓展:flex:1;是简写形式。
拆分:flex-grow:; 扩展的量
Flex-shrink:;收缩的量
Flex-basis:; 元素的大小
注:flex-shrink:0; 表示不压缩
三、多列布局
多列属性：
1:列数：
Column-count:;
2:列间距:
Column-gap:;
3:列分割线:
Column-rule:;
4:控制每一列的列的高度是否统一:
Column-fill:;
Auto 列高度自适应内容
Balabce 有列的高度以其中最高的一列统一
5:跨列:
Column-span:all;
6:列宽:
Column-width:;
7:column:7
Column-count和column-width 的简写。