Vuetify中v-slide-group设置justify-space-evenly不生效问题

问题核心原因 #

你的代码存在两个关键问题导致对齐失效：

1. 所有内容被包裹在**单个v-slide-group-item**中，v-slide-group仅将这个容器识别为唯一可滑动项，无法实现多元素的空间分配
2. v-slide-group内部的滚动容器（.v-slide-group__content）默认样式会覆盖外部添加的justify-space-*类，导致自定义对齐规则不生效

解决方案 #

1. 拆分独立的v-slide-group-item

将每个需要展示的内容块单独放在一个v-slide-group-item中，让slide group识别多个可分发的独立项。

2. 强制覆盖内部容器的对齐样式

使用Vuetify深度选择器（:deep()）修改内部滚动容器的布局属性，同时给每个item设置弹性布局规则，确保它们均匀占满可用宽度。

修改后的完整代码 #

<template>
  <v-app>
    <v-main>
      <v-slide-group show-arrows class="slide-group-custom">
        <!-- 每个内容块对应独立的v-slide-group-item -->
        <v-slide-group-item class="slide-item" v-for="n in 3" :key="n">
          <div class="d-flex flex-column justify-center align-center ma-4">
            <span class="text-caption">Publisher</span>
            <v-icon class="text-center" icon="mdi-domain" size="large"></v-icon>
            <p>Test</p>
          </div>
        </v-slide-group-item>
      </v-slide-group>
    </v-main>
  </v-app>
</template>

<style scoped>
.slide-group-custom :deep(.v-slide-group__content) {
  justify-content: space-evenly; /* 启用均匀分布规则 */
  width: 100%; /* 确保容器占满父级宽度 */
}

.slide-item {
  flex: 1; /* 让每个item自动分配可用空间 */
  min-width: 120px; /* 设置最小宽度，避免内容被过度挤压 */
}
</style>

灵活调整说明 #

• 若需要space-between或space-around的对齐效果，只需将justify-content的值替换为对应属性即可
• 如果内容能完全显示在一行、不需要滑动功能，可移除show-arrows属性，对齐规则依然生效

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