justify-content: space-between 应用了太多的结束空间答案

【问题标题】：justify-content: space-between is applying too much end spacejustify-content: space-between 应用了太多的结束空间
【发布时间】：2022-01-06 09:31:58
【问题描述】：

我正在使用 Vuetify flex 帮助程序 justify-space-between，它是 justify-content: space-between 的缩写，但它似乎无法正常工作。

似乎认为行的末尾有一个“幽灵元素”之类的东西，因为它在最后一个元素和末尾之间增加了额外的空间，不应该有。

在这里编写代码：https://codepen.io/nolsy/pen/qBPKvYZ

显示额外结束空间的屏幕截图：

我希望只有 2 个空格，最后的空间应该在这两个空格之间划分并使它们更大。为什么不这样做？

提前致谢！

【问题讨论】：

标签： css flexbox vuetify.js justify

【解决方案1】：

参考this答案。

弹性容器上的::before 和::after 伪元素成为弹性项目。

弹性容器的每个流入子项都成为弹性项目。

在您的模板中，在您的 .v-list-item 容器中创建了一个 :after 元素，它为您的容器添加了一个额外的元素。

你可以做的是你可以手动添加一个 css 来清除 after 元素，如下所示。

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

这将删除额外的:after 元素，您的代码将按执行方式运行。

Working Fiddle

【讨论】：

【解决方案2】：

由于v-list-item，请使用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/font@4.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>




 <div id="app">
  <v-app id="inspire">
  <v-app>
      <v-container>
        <v-card elevation="1">
          <v-row class="d-flex justify-space-between">
            <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>

【讨论】：