希望您之前已经阅读了Flexbox 简介理论，让我们更深入地了解间距。
间距 Quasar CSS 类提供了一种简单的方法，可以轻松地将元素（尤其是在网格行中）以相等的距离彼此分开。
类型
根据您的用例，间距主要有两种类型：q-gutter-{size} 和 q-col-gutter-{size}。第一种是在您想要彼此分开的元素不使用指定宽度的col-* 或 offset-* 类时使用，第二种是在它们具有指定宽度的col-* 或 offset-* 类时使用。
提示
后缀（-none、-xs、-sm、-md、-lg、-xl）不代表设备屏幕尺寸，而是指元素之间间距的大小。
类“q-gutter-{size}”
警告
q-gutter-* 类对父元素应用负上边距和左边距，对子元素应用正上边距和左边距。在使用其他间距类时请注意这一点，以免破坏间距的 css。
当直接子元素没有指定宽度的col-* 或 offset-* 类时，应使用这些类。
此外还有 q-gutter-none 类（等效于：未应用间距），它未包含在上面的示例中。
类“q-col-gutter-{size}”
警告
q-col-gutter-* 类对父元素应用负上边距和左边距，对子元素应用正上边距和左边距。在使用其他间距类时请注意这一点，以免破坏间距的 css。
当直接子元素具有指定宽度的col-* 或 offset-* 类时，应使用这些类。
优点、缺点以及如何解决问题 - “q-gutter-{size}” 与 “q-col-gutter-{size}”
这两组类都有优缺点。
警告
因为q-gutter-* 和q-col-gutter-* 类都对父元素应用负上边距和左边距，所以不应在父元素上应用针对背景、边距或边框相关属性的样式。
相反，您需要将它们包装在一个容器中，在容器上应用样式，并在容器上添加overflow-auto 或row 类
提示
q-gutter-* 类不会更改子元素的内部尺寸，因此您可以直接在子元素上使用background 或border。
警告
q-col-gutter-* 类会更改子元素的外部尺寸，因此您不能再在子元素上使用指定宽度的col-* 或offset-* 类。
警告
因为q-col-gutter-* 类对子元素应用负上边距和左边距，所以不应在子元素上应用针对背景、边距或边框相关属性的样式。相反，您需要将带样式的元素放在子元素内，并在该元素上应用样式。
Flex 网格游乐场
要查看 Flex 的实际效果，可以使用 Flex 游乐场来交互式地了解更多信息。
Flex 游乐场launch