- 小知识，大挑战！本文正在参与“程序员必备小知识”创作活动。
平时由于项目需要展示的角度不同，前端总是会涉及到各种各样的布局，这就要我们对每一种布局都有一定的了解，才能选择最为合适的布局来进行开发，本系列就来对各种布局进行复习和梳理。
1.Flex 布局系列
flex 属性：flex 是 flex-grow，flex-shrink 和 flex-basis 的缩写。
flex-grow用于设置各 item 项按对应比例划分剩余空间，若 flex 中没有指定 flex-grow，则相当于设置了 flex-grow：1
flex-shrink用于设置 item 的总和超出容器空间时，各 item 的收缩比例，若 flex 中没有指定 flex-shrink，则等同于设置了 flex-shrink：1
flex-basis用于设置各 item 项的伸缩基准值，可以取值为长度或百分比，如果 flex 中省略了该属性，则相当于设置了 flex-basis:0
当 flex 为 none 时,等同于 flex: 0 0 auto。
当 flex 为 auto 时，等同于 flex: 1 1 auto。
当 flex 取值为一个数字，则该数字是设置的 flex-grow 值，其它两个属性用初始值，如 flex:1 时，等同于 flex: 1 1 0%。
当 flex 取值为 2 个数字时，相当于设置的 flex-grow 和 flex-shrink 值，flex-basis 取值为初始值，如 flex:1 0 时，等同于 flex: 1 0 0%。
当 flex 取值为 1 个数字和 1 个长度或百分比时，设置的是 flex-grow 和 flex-basis 的值，flex-shrink 值是初始值，如 flex:1 20%,等同于 flex: 1 1 20%。
2.盒模型
- 标准模型：宽度=内容的宽度（content）+ border + padding，对应
box-sizing:content-box; - IE 盒子模型：宽度=内容宽度（content+border+padding），对应
box-sizing:border-box;
感兴趣的童鞋，可以继续关注后续文章。
