深入理解 CSS3 flex 布局

目标：

1. 能够说出 flex 盒子的布局原理
2. 能够使用 flex 布局的常用属性
3. 能够独立完成小案例

传统布局：

• 兼容性好
• 布局繁琐
• 局限性，不能在移动端很好的布局

flex 弹性布局

• 操作方便，布局极为简单，移动端应用很广泛
• PC 端浏览器支持情况较差
• IE 11或更低版本，不支持或仅部分支持

建议：

1. 如果是 PC 端页面布局，我们还是用传统布局
2. 如果是移动端或者不考虑兼容性问题的 PC 端页面布局，我们还是使用 flex 弹性布局

flex 是 flexible box 的缩写，意为弹性布局，用来为盒状模型提供最的的灵活性，任何一个容器都可以指定为 flex 布局。

• 当我们为父盒子设为 flex 布局以后，子元素的 float、clear 和 vertical-align 属性将失效。
• 伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性盒布局 = flex 布局

1.布局原理

总结 flex 布局原理：
通过给父盒子添加 flex 属性，来控制自盒子的位置和排列方式。

flex 布局父项属性

justify-content 设置主轴上的子元素排列方式