企业官网建设流程全解析

• 前端
• UI组件
• 跨平台

Quasar 的网格系统以 12 列 Flexbox 为基础，其中.row是承载所有列布局的容器。本文将基于 Quasar 官方文档（docs/src/pages/layout/grid/row.md）逐节讲解.row的全部用法，从等宽列、可变宽度列到断点响应式类、对齐、换行、重排序、偏移与嵌套，并深入其底层实现（ui/src/css/core/flex.sass），帮助你系统掌握并复现文档中的每一个示例（全部示例源码位于 docs/src/examples/grid/）。

前置知识：理解 Flexbox 与断点

在深入 Row 之前，建议先阅读官方文档的 Introduction to Flexbox 理论部分，它是理解.row行为的基础。Quasar 网格基于以下两个事实：

• 12 列网格：$flex-cols变量在 ui/src/css/variables.sass 中被定义为12，所有.col-*与.offset-*类的宽度/偏移量都通过percentage($i / 12)计算得出。
• 五个断点：Quasar 的断点阈值定义在 ui/src/plugins/screen/Screen.js 中：xs（0）、sm（600）、md（1024）、lg（1440）、xl（1920）。断点类基于@media (min-width: ...)生效，即“大于等于该宽度时应用”。

.row本身的核心定义只有几行（ui/src/css/core/flex.sass）：

.row, .column, .flex display: flex flex-wrap: wrap &.inline display: inline-flex .row.reverse flex-direction: row-reverse

也就是说，.row默认是display: flex且flex-wrap: wrap的横向容器，这一底层事实决定了本页所有示例的行为。

等宽列（Equal-width）

利用断点专属的列类，可以创建等宽列。你可以在每个需要的断点上添加任意数量的无单位类（即不带数字的.col），每一列都会获得相同宽度。

以下两个网格布局适用于从xs到xl的所有设备和视口（源码见 RowEqualWidth.vue）：

<div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col"> .col </div> <div class="col"> .col </div> </div>

从底层实现看，.col的默认flex: 10000 1 0%（flex.sass）使它能够以0%为基准均分剩余空间；而.col-*（带数字）的列则会@extend .col-auto并使用固定百分比宽度。正因如此，无数字的.col无论放几个都会自动等分整行。

设置单列宽度（Setting one column width）

Flexbox 网格的自动布局意味着：你可以设定某一列的宽度，其余列会自动围绕它重新分配空间。可以使用预定义的网格类（如下所示），也可以使用内联宽度。注意，无论中间列多宽，其余列都会自动调整（源码见 RowColumnWidth.vue）：

<div class="row"> <div class="col"> .col </div> <div class="col-6"> .col-6 (wider) </div> <div class="col"> .col </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-5"> .col-5 (wider) </div> <div class="col"> .col </div> </div>

.col-6固定占 50% 宽度（6 / 12），.col-5固定占约 41.67%（5 / 12），两侧的.col自动瓜分剩余空间。在 flex.sass 中，这一宽度由循环生成的规则计算：

.row > .col<name>-<i> height: auto width: toFixed(math.percentage(math.div($i, $flex-cols)), 10000)

即第$i列的宽度恒为$i / 12 * 100%。

可变宽度内容（Variable width content）

使用col-{breakpoint}-auto类，列可以根据其内容的自然宽度自动调整大小。这对单行内容（如输入框、数字等，见本页最后一个示例）特别有用。它与水平对齐类配合，非常适合在视口宽度变化、列尺寸不均时实现居中布局（源码见 RowVariableWidth.vue）：

<div class="row justify-center"> <div class="col-12 col-md-2"> .col-12 .col-md-2 </div> <div class="col-12 col-md-auto"> .col-12 .col-md-auto (Variable width content) </div> <div class="col-12 col-md-2"> .col-12 .col-md-2 </div> </div> <div class="row"> <div class="col"> .col </div> <div class="col-12 col-md-auto"> .col-12 .col-md-auto (Variable width content) </div> <div class="col"> .col </div> </div>

第一组行中，中间列内容较长，col-md-auto让其按内容宽度自适应；第二组行中，两侧.col平分剩余空间。底层实现为&-auto { flex: 0 0 auto }（flex.sass），即“不放大、不缩小、宽度由内容撑开”。

响应式类（Responsive classes）

网格提供五个层级（tier）的预定义类，用于构建复杂的响应式布局。你可以在超小屏（xs）、小屏（sm）、中屏（md）、大屏（lg）或超大屏（xl）上按需定制列的尺寸。

所有断点（All breakpoints）

对于从最小设备到最大设备都保持一致的网格，使用.col和.col-*类。当需要特定尺寸的列时使用带数字的类；否则放心使用.col（源码见 RowAllBreakpoints.vue）：

<div class="row"> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> <div class="col">.col</div> </div> <div class="row"> <div class="col-8">.col-8</div> <div class="col-4">.col-4</div> </div>

无前缀的.col/.col-*类在所有视口下都生效（不包含媒体查询）。col-8+col-4恰好凑满 12 列。

堆叠到水平（Stacked to horizontal）

组合使用.col-12与.col-md-*类，可以创建一个基础网格系统：在小屏设备上纵向堆叠，在中屏（桌面）设备上转为水平排列（源码见 RowStackedToHorizontal.vue）：

<div class="row"> <div class="col-12 col-md-8">.col-12 .col-md-8</div> <div class="col-12 col-md-4">.col-12 .col-md-4</div> </div> <div class="row"> <div class="col-12 col-md">.col-12 .col-md</div> <div class="col-12 col-md">.col-12 .col-md</div> <div class="col-12 col-md">.col-12 .col-md</div> </div>

原理：.col-12在小于md（1024px）时使每列占满整行（堆叠）；col-md-8、col-md-4、col-md在>= 1024px的媒体查询内覆盖宽度，恢复水平布局。

混搭（Mix and match）

不想让列在某个网格层级简单地堆叠？可以按需为每个层级组合不同的类。下面的例子展示了三种常见模式（源码见 RowMixAndMatch.vue）：

<!-- 移动端：一列全宽、另一列半宽；桌面端：8 + 4 --> <div class="row"> <div class="col col-md-8">.col .col-md-8</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <!-- 移动端：50% 宽；桌面端：升至 33.3% 宽 --> <div class="row"> <div class="col-6 col-md-4">.col-6 .col-md-4</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> <div class="col-6 col-md-4">.col-6 .col-md-4</div> </div> <!-- 无论移动端还是桌面端，始终 50% 宽 --> <div class="row"> <div class="col-6">.col-6</div> <div class="col-6">.col-6</div> </div>

每个断点类都独立生效，后匹配的（更高断点的）媒体查询规则会覆盖前面的默认规则，从而实现这种“逐级定制”。

对齐（Alignment）

使用 flexbox 对齐工具类，可以垂直和水平对齐列。垂直对齐（源码见 RowVerticalAlignment.vue）：

<q-badge>items-start</q-badge> <div class="row items-start"> <div class="col"> One of three cols </div> <div class="col"> One of three cols </div> <div class="col"> One of three cols </div> </div> <q-badge>items-center</q-badge> <div class="row items-center"> <div class="col"> One of three cols </div> <div class="col"> One of three cols </div> <div class="col"> One of three cols </div> </div> <q-badge>items-end</q-badge> <div class="row items-end"> <div class="col"> One of three cols </div> <div class="col"> One of three cols </div> <div class="col"> One of three cols </div> </div> <q-badge>self-*</q-badge> <div class="row"> <div class="col self-start"> .self-start </div> <div class="col self-center"> .self-center </div> <div class="col self-end"> .self-end </div> </div>

• items-*：作用于整行（对应 flex 容器的align-items），控制所有列在交叉轴（垂直方向）上的对齐；
• self-*：作用于单个列（对应 flex 元素的align-self），允许单独覆盖某一列的对齐方式；
• 这些工具类定义在 ui/src/css/flex-addon.sass 中，包括items-start、items-center、items-end、items-baseline、items-stretch与对应的self-*系列。

水平对齐（源码见 RowHorizontalAlignment.vue）：

<q-badge>justify-start</q-badge> <div class="row justify-start"> <div class="col-4"> One of two cols </div> <div class="col-4"> One of two cols </div> </div> <q-badge>justify-center</q-badge> <div class="row justify-center"> <div class="col-4"> One of two cols </div> <div class="col-4"> One of two cols </div> </div> <q-badge>justify-end</q-badge> <div class="row justify-end"> <div class="col-4"> One of two cols </div> <div class="col-4"> One of two cols </div> </div> <q-badge>justify-around</q-badge> <div class="row justify-around"> <div class="col-4"> One of two cols </div> <div class="col-4"> One of two cols </div> </div> <q-badge>justify-between</q-badge> <div class="row justify-between"> <div class="col-4"> One of two cols </div> <div class="col-4"> One of two cols </div> </div> <q-badge>justify-evenly</q-badge> <div class="row justify-evenly"> <div class="col-4"> One of two cols </div> <div class="col-4"> One of two cols </div> </div>

justify-*对应 flex 容器的justify-content，控制列在主轴线（水平方向）上的分布：justify-start（左对齐）、justify-center（居中）、justify-end（右对齐）、justify-around（两侧均分间距）、justify-between（两端对齐、中间均分）、justify-evenly（完全等距分布）。

提示：还有便捷的flex-centerCSS 类，它等价于items-center+justify-center。可与flex、row或column一起使用，快速实现水平和垂直双向居中。

列换行（Column wrapping）

如果一行内放置的列超过 12 个，多出的列组将作为一个整体单元换行到新的一行（源码见 RowColumnWrapping.vue）：

<div class="row"> <div class="col-9">.col-9</div> <div class="col-4"> .col-4<br />Since 9 + 4 = 13 &gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. </div> <div class="col-5"> .col-5<br />Subsequent columns continue along the new line. </div> </div> <div class="row"> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> <div class="col-6 col-sm-3">.col-6 .col-sm-3</div> </div>

第一组行中，9 + 4 = 13 > 12，因此.col-4连同其后的内容作为一个整体换到新行；第二组行中，4 个col-sm-3在sm及以上正好凑满 12 列排成一行，而在xs下每个col-6以半宽两两换行。这一行为正是由.row的flex-wrap: wrap保证的（flex.sass）。

重排序（Reordering）

反转方向（源码见 RowReverse.vue）：

<div class="row reverse"> <div class="col"> First, but last </div> <div class="col"> Second, unchanged </div> <div class="col"> Third, but first </div> </div>

.row.reverse通过flex-direction: row-reverse（flex.sass）使整行列序反转，第一个元素显示在最右侧。

Flex 顺序（源码见 RowFlexOrder.vue）：

<div class="row"> <div class="col order-none"> First, but unordered<br />(.order-none) </div> <div class="col order-last"> Second, but last<br />(.order-last) </div> <div class="col order-first"> Third, but first<br />(.order-first) </div> </div>

order-first、order-last和order-none分别对应 flex 的order: 0/ 极大值 / 保持原序，允许在不改动 DOM 顺序的前提下任意调整列的显示顺序。

偏移列（Offsetting columns）

使用.offset-md-*类将列向右移动，这些类会为列增加*列宽的左外边距。例如.offset-md-4会将.col-md-4向右移动四列（源码见 RowOffsettingColumns.vue）：

<div class="row"> <div class="col-md-4">.col-md-4</div> <div class="col-md-4 offset-md-4">.col-md-4 .offset-md-4</div> </div> <div class="row"> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> <div class="col-md-3 offset-md-3">.col-md-3 .offset-md-3</div> </div> <div class="row"> <div class="col-md-6 offset-md-3">.col-md-6 .offset-md-3</div> </div>

底层实现同样是百分比计算：margin-left: percentage($i / $flex-cols)（flex.sass），偏移量与列宽共用同一套 12 列比例体系，因此offset-md-4恰好等于 4 列的宽度。

嵌套（Nesting）

要在默认网格中嵌套内容，只需在某个现有的.col-sm-*列内部再添加一个新的.row和一组.col-sm-*列。嵌套的行内列宽之和应不超过 12（并不要求一定用满全部 12 列）（源码见 RowNesting.vue）：

<div class="row"> <div class="col-sm-9"> <p>Level 1: .col-sm-9</p> <div class="row"> <div class="col-8 col-sm-6"> Level 2: .col-8 .col-sm-6 </div> <div class="col-4 col-sm-6"> Level 2: .col-4 .col-sm-6 </div> </div> </div> </div>

嵌套的.row会在其父列的宽度范围内重新建立一个完整的 12 列网格：示例中 Level 2 的两列在xs下为8 + 4，在sm及以上切换为6 + 6。Quasar 网格没有层数限制，可以任意深度递归嵌套。

动手实践

上文所有示例的完整 Vue 组件（含演示用的 SASS 样式）都位于 docs/src/examples/grid/ 目录：

可以直接将这些模板代码复制到你的 Quasar 项目（例如 app-vite/playground-js 或 app-vite/playground-ts 的页面组件中）运行验证。

延伸阅读

• Grid Column：列类详解
• Grid Gutter：行间距与列间距
• Introduction to Flexbox：Flexbox 理论基础
• Flex Playground：交互式练习场
• 底层实现：ui/src/css/core/flex.sass（.row/.col-*/.offset-*/.reverse）、ui/src/css/flex-addon.sass（对齐与顺序工具类）、ui/src/css/variables.sass（$flex-cols: 12）、ui/src/plugins/screen/Screen.js（断点阈值定义）

总结

Quasar 的.row是一套完备的响应式 12 列网格容器：.col负责等分、.col-*负责定宽、col-{bp}-auto负责内容自适应、offset-{bp}-*负责偏移、.reverse与order-*负责重排，而items-*、self-*、justify-*与flex-center则提供完整的对齐能力。其全部行为均由 flex.sass 中基于 12 列百分比的计算规则驱动，理解这套规则后，无论多复杂的响应式页面布局都能通过组合这些类轻松实现。

• 前端
• UI组件
• 跨平台