I am using the Vuetify flex helper justify-space-between, which is short for justify-content: space-between, but it doesn't seem to be working properly.

It seems to think that there is like a 'ghost element' at the end of the row or something because it adds extra space between the last element and the end, where there should not be any.

codepen here:

I would expect there to be only 2 spaces, and the space at the end should be divided between those two spaces and make them larger. Why is it not doing this?

Thanks in advance!

CodePudding user response：

Refering to this answer.

::before and ::after pseudo elements on a flex container become flex items.

Each in-flow child of a flex container becomes a flex item.

Inside your template there is an :after element being created inside your .v-list-item container, whih adds anextra element to your container.

What you can do is you can manually add a css to clear the after element as below.

.v-list-item:after {
    content: none;
}

This will remove the extra after element and your code will work as exected.

Working Fiddle

CodePudding user response：

Its due to v-list-item, use v-row insted.

new Vue({
  el: '#app',
  vuetify: new Vuetify(),

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.24.0/axios.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/[email protected]/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vuetify.js"></script>




 <div id="app">
  <v-app id="inspire">
  <v-app>
      <v-container>
        <v-card elevation="1">
          <v-row >
            <v-btn>
              join
            </v-btn>
            <v-btn>
              join
            </v-btn>
            <v-btn>
              join
            </v-btn>
          </v-row>
        </v-card>
      </v-container>
  </v-app>
</div>
</div>

CodePudding user response：

Resolved this, but posting anyways in case it helps somebody else.

It's something to do with v-list-item. If I remove that, the spacing is applied as expected. Not sure exactly what intricacy is causing this behaviour, but it seems to be the culprit