标准盒模型 怪异盒模型 弹性盒模型

标准盒模型

box-sizing：content-box；//标准盒模型
标准盒模型总宽度=border2+padding2+content

怪异盒模型

box-sizing：border-box；//怪异模式
怪异盒模型的总宽度=width+margin(左右)( width已经包含了padding和border值)

弹性盒模型

flex-direction:row //(默认)主轴为水平方向,起点在左端。
flex-direction:row-reverse //主轴为水平方向,起点在右端
flex-direction:column //使用后会使主轴变为y轴
flex-firection:column-reverse //主轴为垂直方向,起点在下沿。

flex-wrap:nowrap //(默认)不换行
flex-wrap:wrap //换行,第一行在上方
flex-wrap:wrap-reverse //换行,第一行在下方

flex-flow:该属性是flex-direction属性和flex-wrap属性的简写形式。
flex-flow:值1(主轴方向) 值2(是否换行)
flex-flow:row nowrap //(默认)

justify-content:flex-start //(默认)左对齐
justify-content:flex-end //右对齐
justify-content:center //居中(子元素紧凑居中)
justify-content:space-between; //两端对齐,项目之间的间隔都相等
justify-content:space-around; //每个项目两侧的间隔相等

align-items:flex-start //与交叉轴的起点对其
align-items:flex-end //与交叉轴的终点即末尾对其
align-items:center //与交叉轴的中点对其
align-items:baseline //项⽬的第⼀⾏⽂字的基线对齐
align-items:stretch //如果项⽬未设置⾼度或设为auto，将占满整个容器的⾼度

align-content属性,紧跟于flex-wrap属性后,该属性用于修饰flex-wrap属性
align-content:flex-start //与交叉轴的起点对齐
align-content:flex-end //与交叉轴的终点对其
align-content:center //与交叉轴的中点对齐
align-content:space-between //与交叉轴两端对齐，轴线之间的间隔平均分布
align-content:space-around //每根轴线两侧的间隔都相等

align-self:center
//允许单个元素与其他元素有不一样的对齐方式
//在弹性子元素上使用。覆盖容器的 align-items 属性。

order属性: (自定义子元素的显示顺序)
//用整数值来定义排列顺序，数值小的排在前面。可以为负值。
//注: 默认值为0。父元素必须设置为弹性盒模型
align-self:flex-start //默认
align-self:flex-end //终点

flex-grow属性:(定义弹性盒子元素的扩展比率)
//表示的是当容器有多余的空间时，这些空间在不同条目之间的分配比例
//比如，一个容器中有 3 个条目，其"flex-grow"属性的值分别为 1，2 和 3
//那么当容器中有空白空间时，这 3 个条目所获得的额外空白空间分别占
//全部空间的 1/6、1/3 和 1/2

flex-shrink属性:(定义弹性盒子元素的收缩比率)
//该属性的值也是无单位的,表示的是当容器的空间不足各个条目的尺寸缩小的比例。
//例如,在容器中有 3 个条目,其"flex-shrink"属性的值分别为 1，2 和 3。
//每个条目的主轴尺寸均为 200px。当容器的主轴尺寸不足 600px 时,
//比如变成了 540px 之后则需要缩小的尺寸 60px 由 3 个条目按照比例来分配。
//3 个条目分别要缩小 10px、20px 和 30px,
//主轴尺寸分别变为 190px、180px 和 170px