盒模型

设置元素盒模型：
box-sizing：border-box怪异盒模型/context-box标准盒模型/inherit默认/initial继承

---

怪异盒模型：

怪异盒模型设置宽高后变不会再改变，使用padding属性会压缩其内容区域，而非扩大外边框

弹性盒模型：

开启弹性和模型： display：flex；
将布局元素按照特定方式排列，而非默认方式
根据主轴上的位置变化： justify-content

• flex-start: 开始位置 (默认值)
• flex-end: 结束位置
• center: 中心位置
• space-around: 两端对齐 (元素到边框的距离是 元素之间的一半)
• space-between: 两端对齐 (元素到边框之间没有距离)

主轴的方向： flex-direction

• row：从左到右(默认值)
• row-reverse： 从右到左
• column：从上到下
• column-reverse：从下到上

交叉轴上的对齐方式： align-items: （规定的是所有的子元素）

• flex-start：交叉轴的起点对齐
• flex-end：交叉轴的终点对齐
• center：交叉轴的中点对齐
• baseline: 项⽬的第⼀⾏⽂字的基线对齐
• stretch：如果项⽬未设置⾼度或设为auto，将占满整个容器的高度(默认值)

开启换行 flex-wrap:

• nowrap: 不换行( 默认)
• wrap: 换行
• wrap-reverse : 倒序换行

交叉轴对齐方式： align-content
align-content用法与align-item相同

该属性必须多行的时候，对单行元素无效,同时也可以去掉多余的行间距

单个元素 在交叉轴上的对齐方式： align-self
用法与align-items相同，但此属性写给需要调用的元素本身

弹性盒模型中的收缩：

弹性盒模型中，收缩默认是按照等比例收缩，每个元素的收缩面积 = 超出部分/元素的总个数

flex-shrink： ；
通过使用flex-shrink属性将收缩部分分配给每个收缩的元素来实现收缩面的分配

div:nth-child(1){
	flex-shrink: 2;
	}
div:nth-child(3){
	flex-shrink: 1;
	}
div:nth-child(3){
	flex-shrink: 0.5;
	}

元素的排序

order： ；
若使用元素排序，需要将每个元素都排列，否则排列的元素与未排列的元素将按照两种排序规则排序

li:nth-child(2){
     order: 1;
     }
li:nth-child(1){
     order: 2;
     }