如何实现多列Vuetify列表的响应式布局？

问题分析 #

你当前的7列列表在桌面端显示正常，但移动端空间不足；使用cols="auto"虽能实现自动换行，但列间及行间存在大量留白，影响布局紧凑性。核心原因是Vuetify默认flex布局在内容宽度不足容器时会自动分配空白空间，且多行布局的对齐方式导致额外空隙。

解决方案 #

通过自定义flex布局属性，调整对齐方式和间距，同时优化列的响应式表现，实现紧凑的3+4自动换行效果：

1. 添加自定义样式控制布局 #

给v-row添加自定义类，调整flex对齐规则和间距：

.custom-row {
  /* 列靠左排列，避免留白填充 */
  justify-content: flex-start;
  /* 多行顶部对齐，减少行间空隙 */
  align-content: flex-start;
  /* 统一控制列间、行间的间距，可按需调整数值 */
  gap: 8px;
}

2. 优化列的响应式设置 #

• 使用cols="auto"让列宽度自适应内容
• 给内容较宽的列（比如目的地列）设置最小宽度，避免过度挤压：min-width: 150px
• 移除no-gutters，改用gap统一控制间距，避免布局混乱

修改后的完整代码 #

<template>
  <v-list lines="three" density="compact">
    <v-list-item v-for="i in 9" :key="i" class="py-1">
      <v-row class="custom-row">
        <v-col cols="auto">
          <v-chip size="small" color="blue" variant="outlined">
            {{ i*2 }}:00
          </v-chip>
        </v-col>
        <v-col cols="auto" style="min-width: 150px">
          <v-chip size="small" variant="elevated" color="blue">
            <span class="text-truncate">
              destination {{ i }}
            </span>
          </v-chip>
        </v-col>
        <v-col cols="auto">
          <small>&nbsp;{{ i }} ml</small>
        </v-col>
        <v-col cols="auto">
          <small style="color: orange"><b>&uarr;&darr;</b>{{ i*10}}</small>
        </v-col>
        <v-col cols="auto">
          <small style="color: blue"> {{ i*3 }}</small>
        </v-col>
        <v-col cols="auto"> Leader </v-col>
        <v-col cols="auto">
          <v-btn size="small" variant="outlined" color="blue" width="100">
            More......
          </v-btn>
        </v-col>
      </v-row>
      <v-list-item-subtitle>
        This is quite a long line of text which may fill two rows
      </v-list-item-subtitle>
    </v-list-item>
  </v-list>
</template>

<style scoped>
.custom-row {
  justify-content: flex-start;
  align-content: flex-start;
  gap: 8px;
}
</style>

关键调整说明 #

• justify-content: flex-start：阻止列自动分散填充容器宽度，消除列间多余留白
• align-content: flex-start：让换行后的多行内容紧贴，减少行与行之间的空隙
• gap: 8px：替代no-gutters，统一控制所有列和行的间距，布局更整洁
• min-width: 150px：确保目的地列在小屏上有足够宽度显示内容，避免截断变形
• class="py-1"：进一步缩小列表项的上下内边距，让整体布局更紧凑

内容的提问来源于stack exchange，提问作者quilkin