网格Gutter

希望您以前已经阅读了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-*类指定宽度时,将使用这些类。

Sizes for q-gutter

还有上面示例中未包括的q-gutter-none类(等同于:未应用gutter)。

Horizontal only q-gutter
Vertical only q-gutter
Mixed horizontal and vertical q-gutter

"q-col-gutter-{size}"类

WARNING

q-col-gutter-*类对父元素应用负top左margin,对子元素应用正top左margin。 在与其他间距类一起使用时,请考虑到这一点,以免破坏gutter的css。

当直接子元素没有使用col-*offset-*类指定宽度时,将使用这些类。

Sizes for q-col-gutter
Horizontal only q-col-gutter
Vertical only q-col-gutter
Mixed horizontal and vertical q-col-gutter

利弊以及解决方法 - “q-gutter-{size}” vs. “q-col-gutter-{size}”

这两套类各有利弊。

WARNING

由于q-gutter-*q-col-gutter-*类都对父元素应用了“负top左margin”,因此您不应在父元素上应用针对background、margin或border相关属性的样式。

相反,您需要将它们包裹在容器中,在容器上应用样式,然后在容器上添加overflow-autorow

Parent styling

TIP

q-gutter-*类不会改变子元素的内部尺寸,因此您可以直接在子元素上使用backgroundborder

WARNING

q-gutter-*类会确实改变子元素的外部尺寸,因此您不能再使用col-*offset-*类来指定子元素的宽度。

Children size compare

WARNING

因为q-col-gutter-*类对子元素应用负top左margin,所以不应在子元素上应用针对background、padding或border相关属性的样式。 相反,您需要将样式元素放置在子元素中,然后对该元素应用样式。

Children styling

Flex网格演示(Playground)

要查看Flex的实际效果,您可以使用Flex演示(Playground)交互地了解更多信息。

Flex Playground