一、布局框架分类
Web 布局框架分为两大体系：CSS 原生布局方案（浏览器自带，无需引入第三方库）、第三方 UI 布局框架（封装好的成熟工具，快速开发页面）。
二、原生 CSS 三大基础布局框架（底层核心）
- Float 浮动布局框架
·核心原理：依靠float实现多栏并排，搭配清除浮动完成页面排版
·结构：DIV 分块 + 浮动 + 清除浮动
·优点：兼容所有老旧浏览器，无学习成本
·缺点：高度塌陷、垂直居中难、响应式麻烦
·适用：老旧维护项目、简单图文环绕
- Flex 弹性布局框架（现代一维布局首选）
·核心：display:flex，专门处理单行 / 单列一维排版
·核心能力：自动等分、一键水平垂直居中、自适应伸缩
·核心属性
父容器：flex-direction、justify-content、align-items、flex-wrap
子元素：flex、order、align-self
·适用：导航栏、商品卡片、左右分栏、移动端适配
- Grid 网格布局框架（二维复杂布局）
·核心：display:grid，同时控制行 + 列二维矩阵排版
·优势：精准划分行列，复杂多图文、后台面板、商城首页布局
·适用：大屏门户、多列表矩阵、复杂页面分区
三、主流第三方 UI 布局框架（企业开发常用）
- Bootstrap（全球老牌响应式框架）
·核心布局体系：12 列栅格系统
·特点：移动优先，内置栅格、弹性、适配多屏幕，大量现成组件
·布局用法：容器.container → 行.row → 列.col--
html
适用：快速搭建后台、官网、简单 H5 页面
2. Element UI / Element Plus（Vue 生态）
·面向 Vue2/Vue3 的企业级后台框架
·内置布局：Layout栅格组件、Container页面布局容器（Header/Main/Sidebar/Footer）
·优势：开箱即用后台布局，侧边栏、顶部导航、分栏模板直接复用
·适用：管理系统、电商后台、数据中台
3. Ant Design / Ant Design Vue（阿里出品）
·栅格：24 列弹性栅格，布局更灵活
·布局组件：Layout、Row/Col栅格、卡片、分栏
·优势：设计规范严谨，适合中大型企业后台、B 端系统
4. Tailwind CSS（原子化 CSS 布局框架）
·无预设组件，提供大量原子类，直接写 class 完成布局
·无需手写 CSS，flex、grid、间距、居中全部靠类名实现
html
![]()
文字内容
适用：快速自定义页面、移动端、灵活定制需求
5. Vant / UniApp（移动端 H5 / 小程序布局框架）
·专为手机端设计，弹性栅格、流式布局、适配手机屏幕
·内置列表、商品卡片、弹窗等移动端专属布局组件
四、栅格布局通用原理（所有 UI 框架底层逻辑）
1.将页面容器平均划分为固定份数（Bootstrap12 列、Antd24 列）
2.通过类名控制元素占据几列，自动实现等分、左右分栏
3.搭配媒体查询，不同屏幕宽度自动切换列占比，实现响应式
五、各框架选型对比
表格
| 框架类型 | 代表 | 优势 | 适用场景 |
| ------------ | -------- | ----------- | -------------- |
| 原生 Flex | CSS 内置 | 零引入、轻量、兼容性好 | 所有中小型页面、移动端 |
| 原生 Grid | CSS 内置 | 二维精准排版 | 复杂矩阵、门户首页 |
| Bootstrap | 第三方栅格 | 上手简单、组件齐全 | 传统官网、简易后台 |
| Element Plus | Vue 后台框架 | 完整页面布局模板 | Vue 管理系统、B 端后台 |
| Tailwind | 原子 CSS | 高度自定义、无冗余样式 | 定制化页面、H5 活动页 |
六、开发选型建议
1.简单静态页面、移动端：优先原生 Flex
2.复杂多行列首页、图文矩阵：原生 Grid
3.Vue 后台管理系统：Element Plus / Ant Design Vue
4.快速搭建响应式官网：Bootstrap
5.需要高度自定义样式、减少 CSS 文件：Tailwind CSS
浙公网安备 33010602011771号