**flex&多行布局**
盒模型
组成部分：content+padding+border+margin
1.标准的盒模型
常见的问题
margin值会错误解析
padding值会撑大盒子大小
计算方式：padding和border都是算在盒子的外部的
2.IE盒模型（怪异盒模型）：当文档丢失了文档类型的时候，在低版本的IE浏览器上，盒模型的计算方式发生了改变
特点：padding和border是长在宽高大小内的
padding值不会撑大容器的大小了
padding和border都是在盒子内的，不需要减去相应的值
计算方式：
自身大小 content（包含border和padding的）
实际大小 content（包含border和padding 的）+margin
属性：box-sizing 设置盒子的显示尺寸
content-box 标准盒模型
border-box 怪异盒模型 常用于移动端 pc端也可以使用
弹性盒
控制子级元素在父级元素上的排列位置
属性：display
属性值：flex
让当前的父级区域形成弹性盒，给父级容器添加弹性盒属性
弹性盒环境下，默认主轴是X轴 所有的子级元素默认都会沿着X轴进行排列
弹性盒中 主轴和侧轴是相对应 默认主轴是X轴 侧轴就是Y轴
在弹性盒环境下不考虑元素类型 所有的标签都可以直接设置宽高大小
居中：
表格居中
文本居中
图片居中
背景居中
定位居中
位移居中
计算属性居中 calc
弹性盒居中：单个元素
magrin：auto
注意：
在弹性盒中浮动是不可以使用的
定位，盒模型（margin/padding）
弹性盒详解
弹性盒中的属性很多
添加到父级元素上的属性 控制所有子级元素的排列位置
添加到子级元素上的属性 控制单个子级元素的排列位置
1.改变主轴的方向（默认主轴是X轴）
属性：flex-direction
属性值：
重要的 row 行/水平 x轴
重要的 column 列/垂直 y轴
了解： row/column-reverse 默认主轴是x/y轴 顺序是相反的
-
控制元素在主轴上的对齐方式
属性：justify-content
属性值：flex-start/end center
重要的属性值
space-between 两端对齐 其余空间自动分配
space-around 所有的空间都是自动分配的 左右空间是一样的
space-evenly 所有的空间间距都是一样大小
3.控制元素在侧轴上的对齐方式
属性：align-items
属性值：flex-start/end
center；
拓展：基线对齐 baseline
当子级元素都设置宽高大小。设置baseline和flex-start效果一样
基线对齐：文本元素 文本大小虽然不一样 但是都在基线上对其显示
4.弹性盒默认宽度超出是不会换行的 默认是进行挤压的
换行属性：flex-wrap
属性值：
nowrap 不换行
wrap 换行
5.行与行之间的间距
属性：align-content
属性值：flex-start 行与行在开始的位置显示 重点/常用
flex-end
center
space-between/around
添加在子级元素上的属性
1.控制单个元素在侧轴上的对齐方式
属性：align-self
属性值：flex-start/end
center
auto 继承了父级的侧轴对齐方式
父级有侧轴对齐 就和父级效果一样
父级没有侧轴对齐
stretch（拉伸）
2.排序优先级，数字越大越往后排，默认为0，支持负数
属性：order
属性值：number
3.属性：flex
属性值：number 所占的比例
重要常用的属性值flex：1
占据主轴上剩下的空间
撑大当前容器的大小（内容）
flex-grow
flex-shirnk
flex-basis