CSS教程：flex弹性布局介绍（与传统布局的比较） 作者：马育民 • 2024-04-10 09:29 • 阅读：10119 # 传统布局 传统的网页布局解决方案，是基于 `盒状模型（div） + float属性 + display属性 + position属性`。 ### 优点 兼容性好，在** PC端各种浏览器** 广泛应用 ### 缺点  - 布局繁琐，`div` 默认独占一行，在一行显示多个 `div`，要大量设置 `float` 浮动，比较麻烦 - 对于 **特殊布局** 非常不方便，比如，**垂直居中** 就不容易实现 - 在 **移动端（小屏幕设备，如：手机）**不能很好的布局 ### 解决 使用flex弹性布局 # flex布局 ### 历史 2009年，W3C提出了一种新的方案—-**Flex布局**，可以简便、完整、响应式地实现各种页面布局。目前，它已经得到了所有浏览器的支持 ### 介绍 Flex是Flexible Box的缩写，意为 **弹性布局**，用来为盒状模型提供最大的灵活性。 任何一个容器都可以指定为 Flex布局 ### flex布局的别名 flex布局有很多别名，如：弹性布局、伸缩布局 等多个别名 ### 优点 - 操作简单、布局简单 - 在 **移动端（小屏幕设备，如：手机）** 应用广泛 ### 缺点 - 低版本浏览器不支持（目前主流浏览器几乎都支持） - 在 PC端应用不多 ### 相关概念 - flex容器：采用 flex布局的 父元素 - 容器成员：flex容器的所有子元素 ### 布局原理 通过给父元素设置 `flex` 属性，控制子元素的位置、排列方式 ``` display: flex; ``` ### 失效的样式 当为 **父元素** 设置 flex 布局后，**子元素** 的 `float`、`clear`、`vertical-align` 属性失效 因为：flex布局默认 子元素是 **水平显示** 参考： https://www.runoob.com/w3cnote/flex-grammar.html https://www.bilibili.com/video/BV1N54y1i7dG/?p=3&spm_id_from=pageDriver&vd_source=53fbcfb9e923d43b8f4486c11d188f20 原文出处：/show_1IX7U2CWyO8k.html