希望你之前已经阅读过 Flexbox 简介 理论，让我们更深入地了解一下间隔线。
¥In the hope that you’ve previously read the Introduction to Flexbox theory, let’s get deeper into Gutters.
Quasar 的 Gutter CSS 类提供了一种简单的方法，可以将元素（尤其是在 网格行 中）以相等的距离彼此分隔开。
¥Gutter Quasar CSS classes offer an easy way to space out elements (especially in a Grid Row) one from each other at equal distance.
类型(Types)
¥Types
根据你的用例，主要有两种类型的间距：q-gutter-{size} 和 q-col-gutter-{size}。当你想要彼此隔开的元素不使用指定宽度的 col-* 或 offset-* 类时，使用第一个方法；当它们使用指定宽度的 col-* 或 offset-* 类时，使用第二个方法。
¥There are two main types of gutters depending on your use-case: q-gutter-{size} and q-col-gutter-{size}. The first is to be used when the elements that you want to distance one from each other don’t use col-* or offset-* classes that specify a width, and the latter is to be used when they do have col-* or offset-* classes specifying a width.
提示
后缀（-none、-xs、-sm、-md、-lg、-xl）并非指设备屏幕尺寸，而是指元素之间的间距大小。
¥Suffixes (-none, -xs, -sm, -md, -lg, -xl) do not refer to device screen size, but to the size of gutter between elements.
类 “q-gutter-{size}”(Classes “q-gutter-{size}”)
¥Classes “q-gutter-{size}”
警告
q-gutter-* 类对父级应用负的上边距和左边距，对子级应用正的上边距和左边距。使用其他 间距类 时请考虑到这一点，以免破坏页边距的 CSS。
¥The q-gutter-* classes apply a negative top and left margins to the parent and a positive top and left margins to the children. Take this into account when working with the other Spacing classes so as to not to break the gutter’s css.
当直接子级没有指定宽度的 col-* 或 offset-* 类时，将使用这些类。
¥These classes are to be used when the direct children don’t have col-* or offset-* classes specifying a width.
上面示例中未包含 q-gutter-none 类（相当于：未应用边线）。
¥There’s also the q-gutter-none class (equivalent to: no gutter applied) which wasn’t included in the example above.
类 “q-col-gutter-{size}”(Classes “q-col-gutter-{size}”)
¥Classes “q-col-gutter-{size}”
警告
q-col-gutter-* 类对父级应用负的上边距和左边距，对子级应用正的上内边距和左边距。使用其他 间距类 时请考虑到这一点，以免破坏页边距的 CSS。
¥The q-col-gutter-* classes apply a negative top and left margins to the parent and a positive top and left paddings to the children. Take this into account when working with the other Spacing classes so as to not to break the gutter’s css.
当直接子级具有指定宽度的 col-* 或 offset-* 类时，将使用这些类。
¥These classes are to be used when the direct children have col-* or offset-* classes that specify a width.
优缺点及使用方法解决方法问题 - “q-gutter-{size}” 与 “q-col-gutter-{size}”(Pros, cons and how to workaround problems - “q-gutter-{size}” vs. “q-col-gutter-{size}”)
¥Pros, cons and how to workaround problems - “q-gutter-{size}” vs. “q-col-gutter-{size}”
这两组类各有利弊。
¥Both set of classes have pros and cons.
警告
由于 q-gutter-* 和 q-col-gutter-* 类都对父组件应用了负的上边距和左边距，因此你不应在父组件上应用针对背景、边距或边框相关属性的样式。
¥Because both q-gutter-* and q-col-gutter-* classes apply a negative top and left margins to the parent you should not apply styling targeting background, margin or border related properties on the parent.
你应该将它们封装在容器中，在容器上应用样式，然后在容器上添加 overflow-auto 或 row 类。
¥Instead you need to wrap them in a container, apply the styling on the container, and add overflow-auto or row class on the container
提示
q-gutter-* 类不会改变子级的内部尺寸，因此你可以直接在子级上使用 background 或 border。
¥The q-gutter-* classes do not change the internal dimensions of the children, so you can use background or border directly on children.
警告
q-col-gutter-* 类会改变子级的外部尺寸，因此你不能再使用 col-* 或 offset-* 类来指定子级的宽度。
¥The q-col-gutter-* classes do change the external dimensions of the children, so you cannot use col-* or offset-* classes specifying a width on children anymore.
警告
由于 q-col-gutter-* 类对子项应用了负的顶部和左侧填充，因此你不应在子组件。你应该将已设置样式的元素放入子元素中，并在该元素上应用样式。
¥Because q-col-gutter-* classes apply a negative top and left padding to the children you should not apply styling targeting background, padding or border related properties on the children. Instead you need to put the styled element inside the child and apply the styling on that element.
Flex 网格 Playground(Flex Grid Playground)
¥Flex Grid Playground
要查看 Flex 的实际运行情况，你可以使用 Flex Playground 以交互方式了解更多信息。
¥To see the Flex in action, you can use the Flex Playground to interactively learn more.
Flex Playgroundlaunch