移动web开发——flex布局

Posted 2021-03-29 一起闯天下

传统布局和flex布局对比

传统布局

◇ 兼容性好；

◇ 布局繁琐；

◇ 局限性，不能再移动端很好的布局；

flex布局

◇ 操作方便，布局极其简单，移动端使用比较广泛；

◇ pc端浏览器支持情况比较差；

◇ IE11或更低版本不支持flex或仅支持部分；

建议

◇ 如果是pc端页面布局，还是采用传统方式；

◇ 如果是移动端或者是不考虑兼容的pc则采用flex；

flex布局管理

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

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

◇  flex布局又叫伸缩布局 、弹性布局 、伸缩盒布局 、弹性盒布局

◇ 采用 Flex 布局的元素，称为 Flex 容器（flex container），简称"容器"。它的所有子元素自动成为容器成员，称为 Flex 项目（flex item），简称"项目"。

总结：就是通过给父盒子添加flex属性，来控制子盒子的位置和排列方式

面对悬崖峭壁，一百年也看不出一条缝来，但用斧凿，得进一寸进一寸，得进一尺进一尺，不断积累，飞跃必来，突破随之。

——出自华罗庚