一、flex布局体验
传统布局与flex布局
传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能再移动端很好的布局
flex弹性布局
- 操作方便，布局极为简单，移动端应用很广泛
- PC端浏览器支持情况较差
- IE 11或更低版本，不支持或仅部分支持
注意：如果是PC端页面的布局，我们还是传统布局；如果是移动端或者不考虑兼容性问题的PC端页面布局，我们还是使用flex弹性布局。
二、flex布局原理
flex是flexible box的缩写，意为 “弹性布局” ，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后，子元素的float、clear 和 vertical-align属性都将失效。
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性布局 = flex布局
注意：flex布局就是通过父盒子添加flex属性，来控制子盒子的位置和排列方式。
