移动WEB开发------flex布局

一、flex布局体验

传统布局与flex布局

传统布局

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

flex弹性布局

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

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

二、flex布局原理

flex是flexible box的缩写，意为 “弹性布局” ，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后，子元素的float、clear 和 vertical-align属性都将失效。
伸缩布局 = 弹性布局 = 伸缩盒布局 = 弹性布局 = flex布局

注意：flex布局就是通过父盒子添加flex属性，来控制子盒子的位置和排列方式。

来源：CSDN

作者：chowhoundgh

链接：https://blog.csdn.net/qq_43078424/article/details/104114607