前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载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 中xs0、sm600、md1024、lg1440、xl1920。断点类基于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.vuediv classrow div classcol .col /div div classcol .col /div /div div classrow div classcol .col /div div classcol .col /div div classcol .col /div /div从底层实现看.col的默认flex: 10000 1 0%flex.sass使它能够以0%为基准均分剩余空间而.col-*带数字的列则会extend .col-auto并使用固定百分比宽度。正因如此无数字的.col无论放几个都会自动等分整行。设置单列宽度Setting one column widthFlexbox 网格的自动布局意味着你可以设定某一列的宽度其余列会自动围绕它重新分配空间。可以使用预定义的网格类如下所示也可以使用内联宽度。注意无论中间列多宽其余列都会自动调整源码见 RowColumnWidth.vuediv classrow div classcol .col /div div classcol-6 .col-6 (wider) /div div classcol .col /div /div div classrow div classcol .col /div div classcol-5 .col-5 (wider) /div div classcol .col /div /div.col-6固定占 50% 宽度6 / 12.col-5固定占约 41.67%5 / 12两侧的.col自动瓜分剩余空间。在 flex.sass 中这一宽度由循环生成的规则计算.row .colname-i height: auto width: toFixed(math.percentage(math.div($i, $flex-cols)), 10000)即第$i列的宽度恒为$i / 12 * 100%。可变宽度内容Variable width content使用col-{breakpoint}-auto类列可以根据其内容的自然宽度自动调整大小。这对单行内容如输入框、数字等见本页最后一个示例特别有用。它与水平对齐类配合非常适合在视口宽度变化、列尺寸不均时实现居中布局源码见 RowVariableWidth.vuediv classrow justify-center div classcol-12 col-md-2 .col-12 .col-md-2 /div div classcol-12 col-md-auto .col-12 .col-md-auto (Variable width content) /div div classcol-12 col-md-2 .col-12 .col-md-2 /div /div div classrow div classcol .col /div div classcol-12 col-md-auto .col-12 .col-md-auto (Variable width content) /div div classcol .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.vuediv classrow div classcol.col/div div classcol.col/div div classcol.col/div div classcol.col/div /div div classrow div classcol-8.col-8/div div classcol-4.col-4/div /div无前缀的.col/.col-*类在所有视口下都生效不包含媒体查询。col-8col-4恰好凑满 12 列。堆叠到水平Stacked to horizontal组合使用.col-12与.col-md-*类可以创建一个基础网格系统在小屏设备上纵向堆叠在中屏桌面设备上转为水平排列源码见 RowStackedToHorizontal.vuediv classrow div classcol-12 col-md-8.col-12 .col-md-8/div div classcol-12 col-md-4.col-12 .col-md-4/div /div div classrow div classcol-12 col-md.col-12 .col-md/div div classcol-12 col-md.col-12 .col-md/div div classcol-12 col-md.col-12 .col-md/div /div原理.col-12在小于md1024px时使每列占满整行堆叠col-md-8、col-md-4、col-md在 1024px的媒体查询内覆盖宽度恢复水平布局。混搭Mix and match不想让列在某个网格层级简单地堆叠可以按需为每个层级组合不同的类。下面的例子展示了三种常见模式源码见 RowMixAndMatch.vue!-- 移动端一列全宽、另一列半宽桌面端8 4 -- div classrow div classcol col-md-8.col .col-md-8/div div classcol-6 col-md-4.col-6 .col-md-4/div /div !-- 移动端50% 宽桌面端升至 33.3% 宽 -- div classrow div classcol-6 col-md-4.col-6 .col-md-4/div div classcol-6 col-md-4.col-6 .col-md-4/div div classcol-6 col-md-4.col-6 .col-md-4/div /div !-- 无论移动端还是桌面端始终 50% 宽 -- div classrow div classcol-6.col-6/div div classcol-6.col-6/div /div每个断点类都独立生效后匹配的更高断点的媒体查询规则会覆盖前面的默认规则从而实现这种“逐级定制”。对齐Alignment使用 flexbox 对齐工具类可以垂直和水平对齐列。垂直对齐源码见 RowVerticalAlignment.vueq-badgeitems-start/q-badge div classrow items-start div classcol One of three cols /div div classcol One of three cols /div div classcol One of three cols /div /div q-badgeitems-center/q-badge div classrow items-center div classcol One of three cols /div div classcol One of three cols /div div classcol One of three cols /div /div q-badgeitems-end/q-badge div classrow items-end div classcol One of three cols /div div classcol One of three cols /div div classcol One of three cols /div /div q-badgeself-*/q-badge div classrow div classcol self-start .self-start /div div classcol self-center .self-center /div div classcol self-end .self-end /div /divitems-*作用于整行对应 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.vueq-badgejustify-start/q-badge div classrow justify-start div classcol-4 One of two cols /div div classcol-4 One of two cols /div /div q-badgejustify-center/q-badge div classrow justify-center div classcol-4 One of two cols /div div classcol-4 One of two cols /div /div q-badgejustify-end/q-badge div classrow justify-end div classcol-4 One of two cols /div div classcol-4 One of two cols /div /div q-badgejustify-around/q-badge div classrow justify-around div classcol-4 One of two cols /div div classcol-4 One of two cols /div /div q-badgejustify-between/q-badge div classrow justify-between div classcol-4 One of two cols /div div classcol-4 One of two cols /div /div q-badgejustify-evenly/q-badge div classrow justify-evenly div classcol-4 One of two cols /div div classcol-4 One of two cols /div /divjustify-*对应 flex 容器的justify-content控制列在主轴线水平方向上的分布justify-start左对齐、justify-center居中、justify-end右对齐、justify-around两侧均分间距、justify-between两端对齐、中间均分、justify-evenly完全等距分布。提示还有便捷的flex-centerCSS 类它等价于items-centerjustify-center。可与flex、row或column一起使用快速实现水平和垂直双向居中。列换行Column wrapping如果一行内放置的列超过 12 个多出的列组将作为一个整体单元换行到新的一行源码见 RowColumnWrapping.vuediv classrow div classcol-9.col-9/div div classcol-4 .col-4br /Since 9 4 13 gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. /div div classcol-5 .col-5br /Subsequent columns continue along the new line. /div /div div classrow div classcol-6 col-sm-3.col-6 .col-sm-3/div div classcol-6 col-sm-3.col-6 .col-sm-3/div div classcol-6 col-sm-3.col-6 .col-sm-3/div div classcol-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.vuediv classrow reverse div classcol First, but last /div div classcol Second, unchanged /div div classcol Third, but first /div /div.row.reverse通过flex-direction: row-reverseflex.sass使整行列序反转第一个元素显示在最右侧。Flex 顺序源码见 RowFlexOrder.vuediv classrow div classcol order-none First, but unorderedbr /(.order-none) /div div classcol order-last Second, but lastbr /(.order-last) /div div classcol order-first Third, but firstbr /(.order-first) /div /divorder-first、order-last和order-none分别对应 flex 的order: 0/ 极大值 / 保持原序允许在不改动 DOM 顺序的前提下任意调整列的显示顺序。偏移列Offsetting columns使用.offset-md-*类将列向右移动这些类会为列增加*列宽的左外边距。例如.offset-md-4会将.col-md-4向右移动四列源码见 RowOffsettingColumns.vuediv classrow div classcol-md-4.col-md-4/div div classcol-md-4 offset-md-4.col-md-4 .offset-md-4/div /div div classrow div classcol-md-3 offset-md-3.col-md-3 .offset-md-3/div div classcol-md-3 offset-md-3.col-md-3 .offset-md-3/div /div div classrow div classcol-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.vuediv classrow div classcol-sm-9 pLevel 1: .col-sm-9/p div classrow div classcol-8 col-sm-6 Level 2: .col-8 .col-sm-6 /div div classcol-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/ 目录示例文件演示要点RowEqualWidth.vue.col等宽列RowColumnWidth.vue.col-6/.col-5单列定宽RowVariableWidth.vuecol-md-auto内容自适应宽度RowAllBreakpoints.vue无前缀类的全断点布局RowStackedToHorizontal.vuecol-12col-md-*堆叠转水平RowMixAndMatch.vue多断点类混搭RowVerticalAlignment.vueitems-*/self-*垂直对齐RowHorizontalAlignment.vuejustify-*水平对齐RowColumnWrapping.vue超过 12 列自动换行RowReverse.vue.row.reverse反转RowFlexOrder.vueorder-first/last/none排序RowOffsettingColumns.vueoffset-md-*列偏移RowNesting.vue行内嵌套网格可以直接将这些模板代码复制到你的 Quasar 项目例如 app-vite/playground-js 或 app-vite/playground-ts 的页面组件中运行验证。延伸阅读Grid Column列类详解Grid Gutter行间距与列间距Introduction to FlexboxFlexbox 理论基础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组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐Material UI Grid 组件详解基于 Flexbox 的响应式布局系统Material UI Grid 组件详解基于 Flexbox 的响应式布局系统 本文以 Material UIMUI文档中 Grid 组件的官方指南为主前端UI组件设计系统ESP-IDF v5.4.1终极安装指南从零搭建完美ESP32开发环境ESP IDF v5.4.1终极安装指南从零搭建完美ESP32开发环境 ESP IDF v5.4.1是乐鑫官方推出的物联网开发框架专为ESP32系列芯片设计物联网嵌入式Laravel-Translatable回退机制揭秘如何优雅处理缺失翻译Laravel Translatable回退机制揭秘如何优雅处理缺失翻译 在全球化应用开发中多语言支持是必不可少的功能。Laravel Translatab后端上一篇Testcontainers for Java 文档贡献指南基于 MkDocs 的站点架构、本地预览与 codeinclude 代码片段机制下一篇.NET Runtime 默认接口方法Default Interface Methods实现规范深度解析从 ECMA-335 增补到 CoreCLR 落地创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 Quasar Grid Row 完全指南：基于 Flexbox 的响应式行布局系统
前端UI组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载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 中xs0、sm600、md1024、lg1440、xl1920。断点类基于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.vuediv classrow div classcol .col /div div classcol .col /div /div div classrow div classcol .col /div div classcol .col /div div classcol .col /div /div从底层实现看.col的默认flex: 10000 1 0%flex.sass使它能够以0%为基准均分剩余空间而.col-*带数字的列则会extend .col-auto并使用固定百分比宽度。正因如此无数字的.col无论放几个都会自动等分整行。设置单列宽度Setting one column widthFlexbox 网格的自动布局意味着你可以设定某一列的宽度其余列会自动围绕它重新分配空间。可以使用预定义的网格类如下所示也可以使用内联宽度。注意无论中间列多宽其余列都会自动调整源码见 RowColumnWidth.vuediv classrow div classcol .col /div div classcol-6 .col-6 (wider) /div div classcol .col /div /div div classrow div classcol .col /div div classcol-5 .col-5 (wider) /div div classcol .col /div /div.col-6固定占 50% 宽度6 / 12.col-5固定占约 41.67%5 / 12两侧的.col自动瓜分剩余空间。在 flex.sass 中这一宽度由循环生成的规则计算.row .colname-i height: auto width: toFixed(math.percentage(math.div($i, $flex-cols)), 10000)即第$i列的宽度恒为$i / 12 * 100%。可变宽度内容Variable width content使用col-{breakpoint}-auto类列可以根据其内容的自然宽度自动调整大小。这对单行内容如输入框、数字等见本页最后一个示例特别有用。它与水平对齐类配合非常适合在视口宽度变化、列尺寸不均时实现居中布局源码见 RowVariableWidth.vuediv classrow justify-center div classcol-12 col-md-2 .col-12 .col-md-2 /div div classcol-12 col-md-auto .col-12 .col-md-auto (Variable width content) /div div classcol-12 col-md-2 .col-12 .col-md-2 /div /div div classrow div classcol .col /div div classcol-12 col-md-auto .col-12 .col-md-auto (Variable width content) /div div classcol .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.vuediv classrow div classcol.col/div div classcol.col/div div classcol.col/div div classcol.col/div /div div classrow div classcol-8.col-8/div div classcol-4.col-4/div /div无前缀的.col/.col-*类在所有视口下都生效不包含媒体查询。col-8col-4恰好凑满 12 列。堆叠到水平Stacked to horizontal组合使用.col-12与.col-md-*类可以创建一个基础网格系统在小屏设备上纵向堆叠在中屏桌面设备上转为水平排列源码见 RowStackedToHorizontal.vuediv classrow div classcol-12 col-md-8.col-12 .col-md-8/div div classcol-12 col-md-4.col-12 .col-md-4/div /div div classrow div classcol-12 col-md.col-12 .col-md/div div classcol-12 col-md.col-12 .col-md/div div classcol-12 col-md.col-12 .col-md/div /div原理.col-12在小于md1024px时使每列占满整行堆叠col-md-8、col-md-4、col-md在 1024px的媒体查询内覆盖宽度恢复水平布局。混搭Mix and match不想让列在某个网格层级简单地堆叠可以按需为每个层级组合不同的类。下面的例子展示了三种常见模式源码见 RowMixAndMatch.vue!-- 移动端一列全宽、另一列半宽桌面端8 4 -- div classrow div classcol col-md-8.col .col-md-8/div div classcol-6 col-md-4.col-6 .col-md-4/div /div !-- 移动端50% 宽桌面端升至 33.3% 宽 -- div classrow div classcol-6 col-md-4.col-6 .col-md-4/div div classcol-6 col-md-4.col-6 .col-md-4/div div classcol-6 col-md-4.col-6 .col-md-4/div /div !-- 无论移动端还是桌面端始终 50% 宽 -- div classrow div classcol-6.col-6/div div classcol-6.col-6/div /div每个断点类都独立生效后匹配的更高断点的媒体查询规则会覆盖前面的默认规则从而实现这种“逐级定制”。对齐Alignment使用 flexbox 对齐工具类可以垂直和水平对齐列。垂直对齐源码见 RowVerticalAlignment.vueq-badgeitems-start/q-badge div classrow items-start div classcol One of three cols /div div classcol One of three cols /div div classcol One of three cols /div /div q-badgeitems-center/q-badge div classrow items-center div classcol One of three cols /div div classcol One of three cols /div div classcol One of three cols /div /div q-badgeitems-end/q-badge div classrow items-end div classcol One of three cols /div div classcol One of three cols /div div classcol One of three cols /div /div q-badgeself-*/q-badge div classrow div classcol self-start .self-start /div div classcol self-center .self-center /div div classcol self-end .self-end /div /divitems-*作用于整行对应 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.vueq-badgejustify-start/q-badge div classrow justify-start div classcol-4 One of two cols /div div classcol-4 One of two cols /div /div q-badgejustify-center/q-badge div classrow justify-center div classcol-4 One of two cols /div div classcol-4 One of two cols /div /div q-badgejustify-end/q-badge div classrow justify-end div classcol-4 One of two cols /div div classcol-4 One of two cols /div /div q-badgejustify-around/q-badge div classrow justify-around div classcol-4 One of two cols /div div classcol-4 One of two cols /div /div q-badgejustify-between/q-badge div classrow justify-between div classcol-4 One of two cols /div div classcol-4 One of two cols /div /div q-badgejustify-evenly/q-badge div classrow justify-evenly div classcol-4 One of two cols /div div classcol-4 One of two cols /div /divjustify-*对应 flex 容器的justify-content控制列在主轴线水平方向上的分布justify-start左对齐、justify-center居中、justify-end右对齐、justify-around两侧均分间距、justify-between两端对齐、中间均分、justify-evenly完全等距分布。提示还有便捷的flex-centerCSS 类它等价于items-centerjustify-center。可与flex、row或column一起使用快速实现水平和垂直双向居中。列换行Column wrapping如果一行内放置的列超过 12 个多出的列组将作为一个整体单元换行到新的一行源码见 RowColumnWrapping.vuediv classrow div classcol-9.col-9/div div classcol-4 .col-4br /Since 9 4 13 gt; 12, this 4-column-wide div gets wrapped onto a new line as one contiguous unit. /div div classcol-5 .col-5br /Subsequent columns continue along the new line. /div /div div classrow div classcol-6 col-sm-3.col-6 .col-sm-3/div div classcol-6 col-sm-3.col-6 .col-sm-3/div div classcol-6 col-sm-3.col-6 .col-sm-3/div div classcol-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.vuediv classrow reverse div classcol First, but last /div div classcol Second, unchanged /div div classcol Third, but first /div /div.row.reverse通过flex-direction: row-reverseflex.sass使整行列序反转第一个元素显示在最右侧。Flex 顺序源码见 RowFlexOrder.vuediv classrow div classcol order-none First, but unorderedbr /(.order-none) /div div classcol order-last Second, but lastbr /(.order-last) /div div classcol order-first Third, but firstbr /(.order-first) /div /divorder-first、order-last和order-none分别对应 flex 的order: 0/ 极大值 / 保持原序允许在不改动 DOM 顺序的前提下任意调整列的显示顺序。偏移列Offsetting columns使用.offset-md-*类将列向右移动这些类会为列增加*列宽的左外边距。例如.offset-md-4会将.col-md-4向右移动四列源码见 RowOffsettingColumns.vuediv classrow div classcol-md-4.col-md-4/div div classcol-md-4 offset-md-4.col-md-4 .offset-md-4/div /div div classrow div classcol-md-3 offset-md-3.col-md-3 .offset-md-3/div div classcol-md-3 offset-md-3.col-md-3 .offset-md-3/div /div div classrow div classcol-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.vuediv classrow div classcol-sm-9 pLevel 1: .col-sm-9/p div classrow div classcol-8 col-sm-6 Level 2: .col-8 .col-sm-6 /div div classcol-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/ 目录示例文件演示要点RowEqualWidth.vue.col等宽列RowColumnWidth.vue.col-6/.col-5单列定宽RowVariableWidth.vuecol-md-auto内容自适应宽度RowAllBreakpoints.vue无前缀类的全断点布局RowStackedToHorizontal.vuecol-12col-md-*堆叠转水平RowMixAndMatch.vue多断点类混搭RowVerticalAlignment.vueitems-*/self-*垂直对齐RowHorizontalAlignment.vuejustify-*水平对齐RowColumnWrapping.vue超过 12 列自动换行RowReverse.vue.row.reverse反转RowFlexOrder.vueorder-first/last/none排序RowOffsettingColumns.vueoffset-md-*列偏移RowNesting.vue行内嵌套网格可以直接将这些模板代码复制到你的 Quasar 项目例如 app-vite/playground-js 或 app-vite/playground-ts 的页面组件中运行验证。延伸阅读Grid Column列类详解Grid Gutter行间距与列间距Introduction to FlexboxFlexbox 理论基础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组件跨平台【免费下载链接】quasarQuasar Framework - Build high-performance VueJS user interfaces in record time项目地址https://gitcode.com/gh_mirrors/qu/quasar点击查看免费下载相关推荐Material UI Grid 组件详解基于 Flexbox 的响应式布局系统Material UI Grid 组件详解基于 Flexbox 的响应式布局系统 本文以 Material UIMUI文档中 Grid 组件的官方指南为主前端UI组件设计系统ESP-IDF v5.4.1终极安装指南从零搭建完美ESP32开发环境ESP IDF v5.4.1终极安装指南从零搭建完美ESP32开发环境 ESP IDF v5.4.1是乐鑫官方推出的物联网开发框架专为ESP32系列芯片设计物联网嵌入式Laravel-Translatable回退机制揭秘如何优雅处理缺失翻译Laravel Translatable回退机制揭秘如何优雅处理缺失翻译 在全球化应用开发中多语言支持是必不可少的功能。Laravel Translatab后端上一篇Testcontainers for Java 文档贡献指南基于 MkDocs 的站点架构、本地预览与 codeinclude 代码片段机制下一篇.NET Runtime 默认接口方法Default Interface Methods实现规范深度解析从 ECMA-335 增补到 CoreCLR 落地创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考