Quasar Framework 和 Bootstrap 作为主流的前端 UI 框架，在 Flex 布局的 CSS 类设计上高度相似 ------ 核心思路都是通过「语义化、原子化的类名」封装原生 CSS Flex 特性，降低开发者直接写 display: flex 等原生属性的成本，同时保持跨框架的使用直觉一致性。两者的相似点主要集中在以下核心维度，且均遵循 W3C Flex 布局规范：
一、核心布局开关：启用 Flex 容器
两者都用简单的根类名标记「Flex 容器」，语义完全一致，直接对应 display: flex：
| 功能 | Quasar 类名 | Bootstrap 类名 | 原生 CSS 映射 |
|---|---|---|---|
| 启用 Flex 布局（块级） | flex |
d-flex |
display: flex |
| 启用 Flex 布局（行内） | inline-flex |
d-inline-flex |
display: inline-flex |
说明：Bootstrap 前缀
d-是「display」的缩写，Quasar 直接用flex更简洁，但核心作用完全一致 ------ 标记元素为 Flex 容器，子元素自动成为 Flex 项目。
二、主轴方向控制（flex-direction）
主轴方向决定 Flex 项目的排列方向（水平 / 垂直、正向 / 反向），两者的类名语义、命名规则几乎完全一致，仅 Quasar 省略了 flex- 前缀（更简洁）：
| 布局方向 | Quasar 类名 | Bootstrap 类名 | 原生 CSS 映射 |
|---|---|---|---|
| 水平正向（默认） | row |
flex-row |
flex-direction: row |
| 水平反向 | row-reverse |
flex-row-reverse |
flex-direction: row-reverse |
| 垂直正向 | column |
flex-column |
flex-direction: column |
| 垂直反向 | column-reverse |
flex-column-reverse |
flex-direction: column-reverse |
示例：Quasar 用
<div class="flex row">，Bootstrap 用<div class="d-flex flex-row">，实现完全相同的水平排列效果。
三、主轴对齐（justify-content）
控制 Flex 项目在「主轴」上的对齐方式（水平对齐 / 垂直对齐，取决于主轴方向），两者的类名完全一致（核心语义无差异）：
| 对齐方式 | Quasar 类名 | Bootstrap 类名 | 原生 CSS 映射 |
|---|---|---|---|
| 主轴起点对齐（默认） | justify-start |
justify-content-start |
justify-content: flex-start |
| 主轴终点对齐 | justify-end |
justify-content-end |
justify-content: flex-end |
| 主轴居中对齐 | justify-center |
justify-content-center |
justify-content: center |
| 项目等距分布（两端贴边） | justify-between |
justify-content-between |
justify-content: space-between |
| 项目等距分布（两端留空） | justify-around |
justify-content-around |
justify-content: space-around |
| 项目等距分布（间距相等） | justify-evenly |
justify-content-evenly |
justify-content: space-evenly |
说明：
justify-evenly是 CSS 较新特性，两者均已完整支持，且类名完全统一，无学习成本。
四、交叉轴对齐（align-items）
控制 Flex 项目在「交叉轴」上的对齐方式（垂直对齐 / 水平对齐，取决于主轴方向），类名语义和功能完全一致：
| 对齐方式 | Quasar 类名 | Bootstrap 类名 | 原生 CSS 映射 |
|---|---|---|---|
| 交叉轴起点对齐（默认） | items-start |
align-items-start |
align-items: flex-start |
| 交叉轴终点对齐 | items-end |
align-items-end |
align-items: flex-end |
| 交叉轴居中对齐 | items-center |
align-items-center |
align-items: center |
| 项目基线对齐 | items-baseline |
align-items-baseline |
align-items: baseline |
| 项目拉伸填充（默认） | items-stretch |
align-items-stretch |
align-items: stretch |
关键相似点：两者都用
items-（Quasar）/align-items-（Bootstrap）作为前缀，核心后缀（start/end/center等）完全一致，语义无歧义。
五、单行 / 多行控制（flex-wrap）
控制 Flex 项目是否换行，类名设计逻辑完全相同，仅前缀差异：
| 换行行为 | Quasar 类名 | Bootstrap 类名 | 原生 CSS 映射 |
|---|---|---|---|
| 不换行（默认） | nowrap |
flex-nowrap |
flex-wrap: nowrap |
| 自动换行（向下） | wrap |
flex-wrap |
flex-wrap: wrap |
| 自动换行（向上） | wrap-reverse |
flex-wrap-reverse |
flex-wrap: wrap-reverse |
六、多行交叉轴对齐（align-content）
当 Flex 项目换行后，控制「多行整体」在交叉轴上的对齐方式，类名完全一致：
| 多行对齐方式 | Quasar 类名 | Bootstrap 类名 | 原生 CSS 映射 |
|---|---|---|---|
| 交叉轴起点对齐 | content-start |
align-content-start |
align-content: flex-start |
| 交叉轴终点对齐 | content-end |
align-content-end |
align-content: flex-end |
| 交叉轴居中对齐 | content-center |
align-content-center |
align-content: center |
| 多行等距分布（两端贴边） | content-between |
align-content-between |
align-content: space-between |
| 多行等距分布（两端留空） | content-around |
align-content-around |
align-content: space-around |
| 多行拉伸填充 | content-stretch |
align-content-stretch |
align-content: stretch |
七、Flex 项目属性（flex-grow/shrink/basis）
控制单个 Flex 项目的「伸缩比例」「收缩比例」「基准宽度」，两者均提供原子化类，设计思路一致：
| 项目属性 | Quasar 类名 | Bootstrap 类名 | 原生 CSS 映射 |
|---|---|---|---|
| 允许拉伸（占满剩余空间） | grow（等价 grow-1） |
flex-grow-1 |
flex-grow: 1（grow 是 Quasar 简写） |
| 禁止拉伸 | grow-0 |
flex-grow-0 |
flex-grow: 0（默认） |
| 允许收缩（空间不足时） | shrink（等价 shrink-1） |
flex-shrink-1 |
flex-shrink: 1（默认） |
| 禁止收缩 | shrink-0 |
flex-shrink-0 |
flex-shrink: 0 |
| 项目基准宽度（自动） | basis-auto |
flex-basis-auto |
flex-basis: auto |
| 项目基准宽度（0） | basis-0 |
flex-basis-0 |
flex-basis: 0 |
说明：Quasar 提供了
grow/shrink简写（等价于grow-1/shrink-1），Bootstrap 需写完整后缀，但核心功能和语义完全一致。
八、响应式设计：断点前缀统一
两者均支持「响应式 Flex 布局」，通过「断点前缀 + Flex 类名」实现不同屏幕尺寸下的布局适配，断点设计逻辑一致（仅具体断点值略有差异，但前缀语义相同）：
| 框架 | 响应式前缀（示例） | 核心逻辑 |
|---|---|---|
| Quasar | sm:/md:/lg:/xl:（如 sm:flex md:column） |
前缀 + Flex 类名，小屏幕起生效 |
| Bootstrap | sm-/md-/lg-/xl-（如 d-sm-flex flex-md-column） |
前缀 + Flex 类名，小屏幕起生效 |
示例：实现「移动端垂直排列、桌面端水平排列」Quasar：
<div class="flex column md:row">Bootstrap：<div class="d-flex flex-column flex-md-row">逻辑完全一致：默认垂直排列，屏幕≥中等尺寸（md）时改为水平排列。
核心相似结论
Quasar 和 Bootstrap 的 Flex CSS 类本质是「同一套 Flex 布局规范的不同语法封装」，核心相似点可概括为：
- 语义一致：所有 Flex 核心特性（容器、方向、对齐、换行、项目伸缩）的类名语义完全匹配；
- 规则统一：类名命名规则（前缀 + 核心后缀）一致，仅 Quasar 更简洁（省略部分冗余前缀）；
- 响应式逻辑相同：均通过断点前缀实现适配，学习成本可复用；
- 完全贴合原生 CSS：类名与原生 Flex 属性一一对应，无额外抽象，开发者无需记忆新规则。
微小差异（非核心，不影响使用直觉）
- Quasar 类名更简洁（如
row而非flex-row，grow而非flex-grow-1）； - Bootstrap 需额外添加
d-flex/d-inline-flex标记容器（Quasar 用flex即可）； - 具体断点的尺寸阈值略有不同（如 Quasar 的
md是 960px，Bootstrap 是 768px），但可通过框架配置自定义。
总之，熟悉其中一个框架的 Flex 布局后，切换到另一个框架几乎无需重新学习，核心使用逻辑完全复用。