Material Design风格神框架vuetify 学习笔记(四) 栅格系统

最新推荐文章于 2025-04-23 11:20:28 发布

原创最新推荐文章于 2025-04-23 11:20:28 发布 · 1.8k 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#python #css #html #spring #flex

本文详细介绍了Vuetify框架的栅格系统，包括v-container、v-spacer、v-row和v-col等组件的使用，以及栅格的列分布、自适应、无间隔、垂直对齐、水平对齐、偏移和排序等功能。Vuetify的12格网格系统借助flexbox实现了强大的响应式布局。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

本文所有组件,均属于栅格系统

一. 容器 v-container

容器是一个预先设计好的响应式布局器
自动居中, 自带padding和grid网格系统

<v-container grid-list-xs>
    <v-btn class="mx-4" color="info">text1</v-btn>
    <v-btn class="mx-4" color="info">text2</v-btn>
    <v-btn class="mx-4" color="info">text3</v-btn>
    <v-btn class="mx-4" color="info">text4</v-btn>
    <p>lorem ipsum dolor sit amet, consectetur,lorem ipsum dolor sit amet, consectetur,lorem ipsum dolor sit amet, consectetur,lorem ipsum dolor sit amet, consectetur,lorem ipsum dolor sit amet, consectetur,lorem ipsum dolor sit amet, consecteturlorem ipsum dolor sit amet, consectetur</p>
  </v-container>

删除视图最大宽度大小的断点 fluid

二. 空白 v-spacer

v-spacer 是一个基本而又通用的间隔组件，用于分配父子组件之间的剩余宽度。当一个 v-spacer 放置在子组件之前或之后时，组件将推到其容器的左右两侧。当多个组件之间使用多个v-spacer 时，剩余的宽度将均匀地分布在每个spacer之间。

<v-row style="width: 28rem">
      <v-btn color="success">text</v-btn>
      <v-spacer></v-spacer>
      <v-btn color="success">text</v-btn>
    </v-row>

<v-row style="width: 28rem">
      <v-btn color="success">text</v-btn>
      <v-spacer></v-spacer>
      <v-btn color="success">text</v-btn>
      <v-spacer></v-spacer>
      <v-btn color="success">text</v-btn>
      <v-spacer></v-spacer>
      <v-btn color="success">text</v-btn>
    </v-row>

三. 栅格系统

Vuetify 配备了一个使用 flexbox 构建的 12 格网格系统。网格用于在应用的内容中创建特定的布局。它包含 5 种类型的媒体断点，用于针对特定的屏幕尺寸或方向，xs、sm、md、lg 和 xl。

1. 栅格相关标签

(1). v-container

见:上节

(2). v-spacer

见:上节

(3). v-row

v-row 是 v-col 的容器组件。它使用 flex 属性来控制其内栏的布局和流。它使用的是 24px 的标准间隔。这可以用 dense 属性来减小，或者用 no-gutters 来完全去除。

(4). v-col

v-col 包裹内容，它必须是 v-row 的直接子代。

2. 列的分布 cols

<template>
  <v-container class="grey lighten-5">
    <v-row class="mb-6" no-gutters>
      <v-col cols="6">
        <v-card class="pa-2" outlined tile> CARD </v-card>
      </v-col>
      <v-col cols="6">
        <v-card class="pa-2" outlined tile> CARD </v-card>
      </v-col>
    </v-row>
  </v-container>
</template>

3. 列的自适应 cols

老规矩 cols默认xs

<v-row class="mb-6 text-center" no-gutters>
    <v-col cols="12" sm="6" md="4" lg="3" xl="2">
      <v-card class="pa-2" outlined color="red white--text"> 1 </v-card>
    </v-col>
    <v-col cols="12" sm="6" md="4" lg="3" xl="2">
      <v-card class="pa-2" outlined color="grey white--text"> 2 </v-card>
    </v-col>
    <v-col cols="12" sm="6" md="4" lg="3" xl="2">
      <v-card class="pa-2" outlined color="blue white--text"> 3 </v-card>
    </v-col>
    <v-col cols="12" sm="6" md="4" lg="3" xl="2">
      <v-card class="pa-2" outlined color="success white--text"> 4 </v-card>
    </v-col>
    <v-col cols="12" sm="6" md="4" lg="3" xl="2">
      <v-card class="pa-2" outlined color="orange white--text"> 5 </v-card>
    </v-col>
    <v-col cols="12" sm="6" md="4" lg="3" xl="2">
      <v-card class="pa-2" outlined color="purple white--text"> 6 </v-card>
    </v-col>
  </v-row>

4. 无间隔 no-gutters

no-gutters 属性从 v-row 中移除负值外边距，从其直接子 v-col 中移除内边距。

<v-row class="mb-6 text-center" justify="start">
      <v-col cols="2">
        <v-card class="pa-2" outlined color="red white--text"> 1 </v-card>
      </v-col>
      <v-col cols="2">
        <v-card class="pa-2" outlined color="grey white--text"> 2 </v-card>
      </v-col>
    </v-row>
    <v-row class="mb-6 text-center" no-gutters justify="start">
      <v-col cols="2">
        <v-card class="pa-2" outlined color="red white--text"> 1 </v-card>
      </v-col>
      <v-col cols="2">
        <v-card class="pa-2" outlined color="grey white--text"> 2 </v-card>
      </v-col>
    </v-row>

5. 行的垂直置顶/置底/居中 align

<v-card class="lighten-5 mb-6" color="blue">
      <v-row align="start" no-gutters style="height: 150px">
        <v-col>
          <v-card class="pa-2" outlined tile> 置顶 </v-card>
        </v-col>
      </v-row>
    </v-card>
    <v-card class="lighten-5 mb-6" color="blue">
      <v-row align="center" no-gutters style="height: 150px">
        <v-col>
          <v-card class="pa-2" outlined tile> 居中 </v-card>
        </v-col>
      </v-row>
    </v-card>
    <v-card class="lighten-5 mb-6" color="blue">
      <v-row align="end" no-gutters style="height: 150px">
        <v-col>
          <v-card class="pa-2" outlined tile> 置底 </v-card>
        </v-col>
      </v-row>
    </v-card>

6. 行内列的垂直置顶/置底/居中 align-self

<v-card class="lighten-5 mb-6" color="blue">
      <v-row align="start" no-gutters style="height: 150px">
        <v-col align-self="start">
          <v-card class="pa-2" outlined tile> 置顶 </v-card>
        </v-col>
        <v-col align-self="center">
          <v-card class="pa-2" outlined tile> 居中 </v-card>
        </v-col>
        <v-col align-self="end">
          <v-card class="pa-2" outlined tile> 置底 </v-card>
        </v-col>
      </v-row>
    </v-card>

7. 水平对齐 justify

justify 对齐方式	说明
start	顶头
center	居中
end	顶尾
space-around	空间包围
space-between	空间在中间

<v-row class="mb-6 text-center" no-gutters justify="start">
      <v-col cols="2">
        <v-card class="pa-2" outlined color="red white--text"> 1 </v-card>
      </v-col>
      <v-col cols="2">
        <v-card class="pa-2" outlined color="grey white--text"> 2 </v-card>
      </v-col>
    </v-row>

8. 偏移 offset

<template>
  <div>
    <v-row class="mb-6 text-center" justify="start">
      <v-col cols="2" offset="3">
        <v-card class="pa-2" outlined color="red white--text"> 1 </v-card>
      </v-col>
      <v-col cols="2" offset="3">
        <v-card class="pa-2" outlined color="grey white--text"> 2 </v-card>
      </v-col>
    </v-row>
  </div>
</template>

在某个屏幕及以上尺寸下才偏移

<v-col cols="2" offset-md="3">

9. 排序 order

我们可以通过设置order来控制列的排序,

order越小,排序越靠前,
没有order的, 会排在前面
order可以赋值 1~12, 还可以赋值 first last

<v-row class="mb-6 text-center" no-gutters justify="start">
      <v-col cols="2">
        <v-card class="pa-2" outlined color="red white--text"> 1 </v-card>
      </v-col>
      <v-col cols="2" order="12">
        <v-card class="pa-2" outlined color="orange white--text"> 2 </v-card>
      </v-col>
      <v-col cols="2" order="1">
        <v-card class="pa-2" outlined color="blue white--text"> 3 </v-card>
      </v-col>
    </v-row>