flex布局详解-弹性布局看我就对了

---

1. 新老盒子模型区别 box-sizing
2. calc语法和用处
3. flex的使用
4. jusitify-content用法
5. align-items的用法
6. align-content的用法
7. align-items和align-contend的区别
8. flex-flow讲解
9. 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

子级身上属性：

flex：1（1指的是一个系数）

align-self (其实就是子元素用来覆盖父级align-items)

flex-group:1 (定义子元素放大比例，默认0)

order（规定子元素顺序、排序 数值越小越靠前默认值0）