Grid Gutter
希望您以前已经阅读过 Flexbox 介绍 理论，让我们更深入地了解网络系统中的Flex 槽(Gutters)。
Gutter Quasar CSS 类提供了一种将元素(尤其是在 网格行中)彼此等距隔开的简便方法。
类型
根据不同的使用情况，gutter 主要有两种类型：q-gutter-{size} 和 q-col-gutter-{size}。 第一种类型是在用在彼此隔开的元素未使用 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}” 和 “q-col-gutter-{size}”
这两套类各有利弊。
WARNING
由于 q-gutter-* 和 q-col-gutter-* 类都对父元素应用了负 top 左 margin，因此您不应在父元素上应用针对 background、margin 或 border 相关属性的样式。
相反，您需要将它们包裹在容器中，在容器上应用样式，然后在容器上添加overflow-auto or row类
TIP
q-gutter-* 类不会改变子元素的内部尺寸，因此您可以直接在子元素上使用background 或 border
WARNING
q-gutter-* 类会改变子元素的外部尺寸，因此您不能再使用 col-* 或 offset-* 类来指定子元素的宽度。
因为 q-col-gutter-* 类对子元素应用 负 top 左 margin ，所以不应在子元素上应用针对 background、padding 或 border 相关属性的样式。 相反，您需要将样式元素放置在子元素中，然后对该元素应用样式。 :::
Flex 演示 （Playground）
要查看 Flex 的实际效果，您可以使用 Flex 演示（Playground）进行交互学习。
Flex Playgroundlaunch