Grid Gutter

Flex 网格
Flexbox 介绍
Flex 网格
Grid Row 行
Flex 网格
Grid Column 列
Flex 网格
Flex 在线体验

希望您以前已经阅读过 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-* 类指定宽度时，使用这些类来添加间隔。

<template>
  <div class="q-pa-md" style="max-width: 500px">
    <p>q-gutter-xs</p>
    <div class="q-gutter-xs">
      <q-btn color="brown" label="Button" v-for="n in 7" :key="`xs-${n}`" />
    </div>

    <p class="q-mt-md">q-gutter-sm</p>
    <div class="q-gutter-sm">
      <q-btn color="teal" label="Button" v-for="n in 7" :key="`sm-${n}`" />
    </div>

    <p class="q-mt-md">q-gutter-md</p>
    <div class="q-gutter-md">
      <q-btn color="accent" label="Button" v-for="n in 7" :key="`md-${n}`" />
    </div>

    <p class="q-mt-md">q-gutter-lg</p>
    <div class="q-gutter-lg">
      <q-btn color="red" label="Button" v-for="n in 7" :key="`lg-${n}`" />
    </div>

    <p class="q-mt-md">q-gutter-xl</p>
    <div class="q-gutter-xl">
      <q-btn color="indigo" label="Button" v-for="n in 7" :key="`xl-${n}`" />
    </div>
  </div>
</template>

q-gutter-xs

q-gutter-sm

q-gutter-md

q-gutter-lg

q-gutter-xl

还有上面示例中未包括的 q-gutter-none 类（等同于：未应用 gutter）。

<template>
  <div class="q-pa-md">
    <div class="q-gutter-x-md">
      <q-btn color="primary" label="Button" v-for="n in 3" :key="n" />
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md" style="max-width: 500px">
    <div class="q-gutter-y-md">
      <q-btn color="teal" label="Button" v-for="n in 10" :key="n" />
    </div>
  </div>
</template>
<template>
  <div class="q-pa-md" style="max-width: 400px">
    <div class="q-gutter-x-xs q-gutter-y-lg">
      <q-btn color="purple" label="Button" v-for="n in 10" :key="n" />
    </div>
  </div>
</template>

“q-col-gutter-{size}” 类

WARNING

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

当直接子元素使用了 col-* 或者 offset-* 类指定宽度时，使用这些类来添加间隔。

<template>
  <div class="q-pa-md">

    <div class="row q-col-gutter-none">
      <div class="col-4" v-for="n in 5" :key="`none-${n}`">
        <div class="my-content">&nbsp;</div>
      </div>
    </div>

    <q-separator spaced />

    <div class="row q-col-gutter-xs">
      <div class="col-4" v-for="n in 5" :key="`xs-${n}`">
        <div class="my-content">&nbsp;</div>
      </div>
    </div>

    <q-separator spaced />

    <div class="row q-col-gutter-sm">
      <div class="col-4" v-for="n in 5" :key="`sm-${n}`">
        <div class="my-content">&nbsp;</div>
      </div>
    </div>

    <q-separator spaced />

    <div class="row q-col-gutter-md">
      <div class="col-4" v-for="n in 5" :key="`md-${n}`">
        <div class="my-content">&nbsp;</div>
      </div>
    </div>

    <q-separator spaced />

    <div class="row q-col-gutter-lg">
      <div class="col-4" v-for="n in 5" :key="`lg-${n}`">
        <div class="my-content">&nbsp;</div>
      </div>
    </div>

    <q-separator spaced />

    <div class="row q-col-gutter-xl">
      <div class="col-4" v-for="n in 5" :key="`xl-${n}`">
        <div class="my-content">&nbsp;</div>
      </div>
    </div>

  </div>
</template>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
<template>
  <div class="q-pa-md">

    <div class="row q-col-gutter-x-md">
      <div class="col-4" v-for="n in 5" :key="`none-${n}`">
        <div class="my-content">&nbsp;</div>
      </div>
    </div>

  </div>
</template>
 
 
 
 
 
<template>
  <div class="q-pa-md">

    <div class="row q-col-gutter-y-md">
      <div class="col-4" v-for="n in 5" :key="`none-${n}`">
        <div class="my-content">&nbsp;</div>
      </div>
    </div>

  </div>
</template>
 
 
 
 
 
<template>
  <div class="q-pa-md">

    <div class="row q-col-gutter-x-xs q-col-gutter-y-lg">
      <div class="col-4" v-for="n in 5" :key="`none-${n}`">
        <div class="my-content">&nbsp;</div>
      </div>
    </div>

  </div>
</template>
 
 
 
 
 

对比分析 “q-gutter-{size}” 和 “q-col-gutter-{size}”

这两套类各有利弊。

WARNING

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

相反，您需要将它们包裹在容器中，在容器上应用样式，然后在容器上添加overflow-auto or row类

<template>
  <div class="q-pa-md" style="max-width: 500px">
    <div class="row">
      <div class="offset-1 col-3 column justify-between">
        <p>在父元素上设置样式 - .row</p>
        <div>
          <div class="bg-yellow q-pa-sm">黄色块区域</div>
          <div class="row q-gutter-lg bg-red-4">
            <div class="q-pa-md bg-green-3" v-for="n in 4" :key="n">C</div>
          </div>
        </div>
      </div>
      <div class="offset-1 col-3 column justify-between">
        <p>在包裹元素上设置样式 - .row</p>
        <div>
          <div class="bg-yellow q-pa-sm">黄色块区域</div>
          <div class="bg-red-4 row">
            <div class="row q-gutter-lg">
              <div class="q-pa-md bg-green-3" v-for="n in 4" :key="n">C</div>
            </div>
          </div>
        </div>
      </div>
      <div class="offset-1 col-3 column justify-between">
        <p>在包裹元素上设置样式 - .overflow-auto</p>
        <div>
          <div class="bg-yellow q-pa-sm">黄色块区域</div>
          <div class="bg-red-4 overflow-auto">
            <div class="row q-gutter-lg">
              <div class="q-pa-md bg-green-3" v-for="n in 4" :key="n">C</div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

在父元素上设置样式 - .row

黄色块区域
C
C
C
C

在包裹元素上设置样式 - .row

黄色块区域
C
C
C
C

在包裹元素上设置样式 - .overflow-auto

黄色块区域
C
C
C
C

TIP

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

WARNING

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

<template>
  <div class="q-px-xl q-py-md" style="max-width: 500px">
    <p>.q-gutter 和未指定大小的子元素</p>
    <div class="row">
      <div class="col bg-red-4">
        <div class="row q-gutter-lg">
          <div :class="`bg-green-${n+1}`" v-for="n in 7" :key="n">
            Child
          </div>
        </div>
      </div>
    </div>

    <q-separator class="q-my-md" />

    <p>.q-col-gutter 和未指定大小的子元素</p>
    <div class="row">
      <div class="col bg-red-4 q-mt-lg">
        <div class="row q-col-gutter-lg">
          <div class="semi-transparent" :class="`bg-green-${n+1}`" v-for="n in 7" :key="n">
            Child
          </div>
        </div>
      </div>
    </div>

    <q-separator class="q-my-md" />

    <p>.q-gutter 大小为 .col-6 的子元素 - 两个 .col-6 加起来会 <strong>超过 100%</strong></p>
    <div class="row">
      <div class="col bg-red-4">
        <div class="row q-gutter-lg">
          <div class="col-6" :class="`bg-green-${n+1}`" v-for="n in 5" :key="n">
            Child
          </div>
        </div>
      </div>
    </div>

    <q-separator class="q-my-md" />

    <p>.q-col-gutter 大小为 .col-6 的子元素 - 两个 .col-6 加起来会 <strong>100%</strong></p>
    <div class="row">
      <div class="col bg-red-4 q-mt-lg">
        <div class="row q-col-gutter-lg">
          <div class="semi-transparent col-6" :class="`bg-green-${n+1}`" v-for="n in 5" :key="n">
            Child
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

.q-gutter 和未指定大小的子元素

Child
Child
Child
Child
Child
Child
Child

.q-col-gutter 和未指定大小的子元素

Child
Child
Child
Child
Child
Child
Child

.q-gutter 大小为 .col-6 的子元素 - 两个 .col-6 加起来会 超过 100%

Child
Child
Child
Child
Child

.q-col-gutter 大小为 .col-6 的子元素 - 两个 .col-6 加起来会 100%

Child
Child
Child
Child
Child
::: warning

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

<template>
  <div class="q-px-xl q-py-md" style="max-width: 500px">
    <p>.q-col-gutter 将样式设置在子元素上</p>
    <div class="row">
      <div class="col bg-red-4 q-mt-lg">
        <div class="row q-col-gutter-lg">
          <div class="semi-transparent col-6 q-pa-md text-center" :class="`bg-green-${n+1}`" v-for="n in 5" :key="n">
            Child
          </div>
        </div>
      </div>
    </div>

    <q-separator class="q-my-md" />

    <p>.q-col-gutter 将样式设置在子元素内的元素中</p>
    <div class="row">
      <div class="col bg-red-4">
        <div class="row q-col-gutter-lg">
          <div class="col-6" v-for="n in 5" :key="n">
            <div class="q-pa-md text-center" :class="`bg-green-${n+1}`">
              Child
            </div>
          </div>
        </div>
      </div>
    </div>

    <q-separator class="q-my-md" />

    <p>.q-col-gutter 直接使用 QBtn 作为子元素</p>
    <div class="row">
      <div class="col bg-red-4 q-mt-lg">
        <div class="row q-col-gutter-lg">
          <q-btn class="semi-transparent col-6" color="primary" label="Button" v-for="n in 5" :key="`md-${n}`" />
        </div>
      </div>
    </div>

    <q-separator class="q-my-md" />

    <p>.q-col-gutter 将 QBtn 放在子元素中作为子元素的子元素</p>
    <div class="row">
      <div class="col bg-red-4">
        <div class="row q-col-gutter-lg">
          <div class="col-6" v-for="n in 5" :key="n">
            <q-btn class="full-width" color="primary" label="Button" />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

.q-col-gutter 将样式设置在子元素上

Child
Child
Child
Child
Child

.q-col-gutter 将样式设置在子元素内的元素中

Child
Child
Child
Child
Child

.q-col-gutter 直接使用 QBtn 作为子元素

.q-col-gutter 将 QBtn 放在子元素中作为子元素的子元素

Flex 演示 （Playground）

要查看 Flex 的实际效果，您可以使用 Flex 演示（Playground）进行交互学习。

Flex Playground
查看更多？
Flex 网格
Grid Column 列
Flex 网格
Flexbox 模式
发现了一处错误？帮助改进提交问题
Privacy Policy | Quasar Artwork
版权声明 本中文文档内容版权为站长个人所有，保留所有权利。
免责声明 本站点所包含的任何跳转链接均为第三方广告内容，站点对这些广告内容的准确性、合法性、真实性不承担任何责任。用户点击跳转链接进入第三方网站后，应自行判断广告内容的真实性和合法性，并自行承担因使用广告内容而产生的风险和责任。任何因使用第三方广告内容而导致的损失或损害，本站点概不负责。