希望您已经阅读过 Flexbox 介绍 理论，让我们更深入地了解网格系统中的间隔（Gutters）。
Gutter Quasar CSS 类提供了一种简便方法，可以在元素（尤其是网格行中的元素）之间添加等距间隔。
类型
根据不同的使用场景，gutter 主要有两种类型：q-gutter-{size} 和 q-col-gutter-{size}。当需要间隔的元素没有使用 col-* 或 offset-* 类指定宽度时，使用前者；当元素使用了 col-* 或 offset-* 类指定宽度时，使用后者。
TIP
后缀（-none、-xs、-sm、-md、-lg、-xl）不是指设备屏幕尺寸，而是指元素之间的间隔大小。
“q-gutter-{size}” 类
WARNING
q-gutter-* 类会给父元素添加负的 top 和 left margin，给子元素添加正的 top 和 left margin。在与其他间距类一起使用时请注意这一点，以免破坏 gutter 的样式。
当直接子元素没有使用 col-* 或 offset-* 类指定宽度时，使用这些类。
还有一个上面示例中未包含的 q-gutter-none 类（等同于不应用间隔）。
“q-col-gutter-{size}” 类
WARNING
q-col-gutter-* 类会给父元素添加负的 top 和 left margin，给子元素添加正的 top 和 left padding。在与其他间距类一起使用时请注意这一点，以免破坏 gutter 的样式。
当直接子元素使用了 col-* 或 offset-* 类指定宽度时，使用这些类。
“q-gutter-{size}” 与 “q-col-gutter-{size}” 的优缺点及解决方案
这两套类各有优缺点。
WARNING
由于 q-gutter-* 和 q-col-gutter-* 类都会对父元素应用负的 top 和 left margin，因此不应在父元素上直接设置 background、margin 或 border 相关的样式。
正确做法是在外面再包一层容器，在该容器上应用样式，并在容器上添加 overflow-auto 或 row 类。
TIP
q-gutter-* 类不会改变子元素的内部尺寸，因此您可以直接在子元素上使用 background 或 border。
WARNING
q-col-gutter-* 类会改变子元素的外部尺寸，因此您不能再使用 col-* 或 offset-* 类来指定子元素的宽度。
WARNING
因为 q-col-gutter-* 类对子元素应用了正的 top 和 left padding，所以不应在子元素上直接设置 background、padding 或 border 相关的样式。正确做法是在子元素内部再放一个元素，在该元素上应用样式。
Flex 演示
要查看 Flex 的实际效果，您可以使用 Flex 演示（Playground）进行交互学习。
Flex Playgroundlaunch