希望您以前已经阅读了Flexbox介绍理论，让我们更深入地了解Gutters。
Gutter Quasar CSS类提供了一种将元素（尤其是在网格行中）彼此等距隔开的简便方法。
类型
根据您的用例，gutter主要有两种类型：q-gutter-{size}和q-col-gutter-{size}。 第一种类型是在您想要彼此隔开的元素不使用col-*或offset-*类指定宽度时使用的，后一种类型是在它们确实使用col-*或offset-*类指定宽度时使用
TIP
后缀（-none、-xs、-sm、-md、-lg、-xl）不是指设备屏幕尺寸，而是指元素之间的gutter尺寸。
"q-gutter-{size}"类
WARNING
q-gutter-*类对父元素应用负top左margin，对子元素应用正top左margin。 在与其他间距类一起使用时，请考虑到这一点，以免破坏gutter的css。
当直接子元素没有使用col-*或offset-*类指定宽度时，将使用这些类。
还有上面示例中未包括的q-gutter-none类（等同于：未应用gutter）。
"q-col-gutter-{size}"类
WARNING
q-col-gutter-*类对父元素应用负top左margin，对子元素应用正top左margin。 在与其他间距类一起使用时，请考虑到这一点，以免破坏gutter的css。
当直接子元素没有使用col-*或offset-*类指定宽度时，将使用这些类。
利弊以及解决方法 - “q-gutter-{size}” vs. “q-col-gutter-{size}”
这两套类各有利弊。
WARNING
由于q-gutter-*和q-col-gutter-*类都对父元素应用了“负top左margin”，因此您不应在父元素上应用针对background、margin或border相关属性的样式。
相反，您需要将它们包裹在容器中，在容器上应用样式，然后在容器上添加overflow-auto或row类
TIP
q-gutter-*类不会改变子元素的内部尺寸，因此您可以直接在子元素上使用background或border
WARNING
q-gutter-*类会确实改变子元素的外部尺寸，因此您不能再使用col-*或offset-*类来指定子元素的宽度。
WARNING
因为q-col-gutter-*类对子元素应用负top左margin，所以不应在子元素上应用针对background、padding或border相关属性的样式。 相反，您需要将样式元素放置在子元素中，然后对该元素应用样式。
Flex网格演示（Playground）
要查看Flex的实际效果，您可以使用Flex演示（Playground）交互地了解更多信息。
Flex Playgroundlaunch