1. 传统布局与 flex 布局比较
传统布局
- 兼容性好
- 布局繁琐
- 局限性，不能在移动端很好的布局
flex 弹性布局
- 操作方便，布局极为简单，移动端应用很广泛
- PC端浏览器支持较差
- IE 11 或 更低版本，不支持或仅部分支持
2. flex 布局原理
flex 是 flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex 布局。
- 当为父盒子设为 flex 布局之后，子元素的 float，clear 和 vertical-align 属性将失效
- 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex布局
采用 Flex 布局的元素，称为 Flex 容器，简称为“容器”。它的所有子元素自动成为容器成员，成为 Flex 项目，简称“项目”。
- 体验中 div 就是 flex 父容器
- 体验中 span 就是子容器 flex 项目
- 子容器可以横向排列，也可以纵向排列
总结 flex 布局原理：就是通过给父盒子添加 flex 属性，来控制子盒子的位置和排列方式。