- 新老盒子模型区别 box-sizing
- calc语法和用处
- flex的使用
- jusitify-content用法
- align-items的用法
- align-content的用法
- align-items和align-contend的区别
- flex-flow讲解
- align-self的作用
10.flex-grow
11.oder注意事项
盒子box-sizing
我们在css中经常会用到padding、border，那这时候问题就会出现了，例如有一个div，宽高我们都设置为100px，我们通过offsetWidth属性打印div宽度，此时为100px，如果你添加一个10px的border，在通过offsetWidth打印div宽度，此时应该为120px；这就是老盒子模型。那么我们来看对比一下盒子模型；
box-sizing:
content-box
border-box
根据名字我们或许也能猜出，content（内容），content-box也就是说无论是padding还是border不会占content的位置，所以使用了padding、border会向外扩张，盒子变大、宽度就会增加！border-boxpadding、border会向内扩张，盒子不变、宽度不变。
calc公式
刚学习css的时候，心里总有疑问有没有这样的语法(当然这样写是丝毫没有作用的❌)
width: 100% - 100px;
但是，我要告诉大家，CSS还真的提供了这样一个函数，那就是calc公式
width: calc(100% - 100px);
- 需要注意的是，运算符前后都需要保留一个空格，例如：
width: calc(100% - 10px)；
- 任何长度值都可以使用
calc()函数进行计算；
- calc()函数支持 "+", "-", "*", "/" 运算；
- calc()函数使用标准的数学运算优先级规则；
display:flex
display:flex添加在父级
适配浏览器：-webkit- (真是工作中，使用postCss插件，会自动适配浏览器)
如果使用了flex弹性布局，那么就不需要使用float浮动,如果想使用position定位，最好也是在外面套一层来使用。
父级身上其他元素
justify-content 子元素水平排列方式 演示
- center：居中
- flex-start: 居左
- flex-end: 居右
- space-between: 两端对齐
- space-around: 子元素拉手分布
align-items 子元素垂直排列
- center 居中
- flex-end 底部
- flex-start 开始
align-centent 多行的时候，垂直排列
- center 居中
flex-direction: 排列方式
- row 横向排列
- row-reverse 横向反向排列
- column 纵向排列
- column-reverse 纵向反向排列
flex-wrap 子元素是否在一行显示
- nowrap 不换行
- wrap 换行
flex-flow：等价于 flex-direction + flex-wrap
- flex-flow: row wrap
