Vuetify + Flex: justify-space-evenly doesn't work on v-slide-group

Question

I want to evenly align v-slide-group-items within a v-slide-group using any of the justify-space-* classes, but it ignores the justify-space-* setting and places all v-slide-group-items to the left instead of spreading them over the width of the v-slide-group.

Vuetify Play (re-production link): v-slide-group + justify-soace-evenly playground

Code:

<template>
  <v-app>
    <v-main>
      <v-slide-group class="d-flex justify-space-evenly" show-arrows>
        <v-slide-group-item>
          <div v-for="n in 3" class="d-flex flex-column justify-center align-center ma-4">
            <span class="text-caption">Publisher</span>
            <v-icon class="text-center justify-center" icon="mdi-domain" size="large"></v-icon>
            <p>Test</p>
          </div>
        </v-slide-group-item>
      </v-slide-group>
    </v-main>
  </v-app>
</template>

Thanks!

Answer 1

Where you currently have the CSS classes on v-slide-group will not have the desired effect as there are elements in-between this and the items. I would suggest adding a div in-between to resolve this.

<v-slide-group show-arrows>
  <v-slide-group-item>
    <div class="d-flex justify-space-evenly w-100">
      <div v-for="n in 3" class="d-flex flex-column justify-center align-center ma-4">
        <span class="text-caption">Publisher</span>
        <v-icon class="text-center justify-center" icon="mdi-domain" size="large"></v-icon>
        <p>Test</p>
      </div>
    </div>
  </v-slide-group-item>
</v-slide-group>

Please see example