vuetify v-flex xs12 只填充一半宽度答案

【问题标题】：vuetify v-flex xs12 only fill half the widthvuetify v-flex xs12 只填充一半宽度
【发布时间】：2018-11-25 11:16:55
【问题描述】：

我正在尝试使用 vuetify v-flex 制作卡片列表，这是代码

    <div id="app">
    <v-app>
    <v-content>
        <v-container fill-height fluid>
        <v-layout>
            
            <v-flex xs12>
            <v-card dark color="grey">
                <v-card-title>
                <div>
                    <h2>Top Questions</h2>
                </div>
                </v-card-title>
            </v-card>
            </v-flex>
            
            <v-flex xs12>
            <v-card v-for="item in items" :key="item._id">
                <v-card-title>
                <h3>{{ item.title }}</h3>
                <p>{{ item.content }}</p>
                </v-card-title>
            </v-card>
            </v-flex>
        </v-layout>        
        </v-container>
    </v-content>
    </v-app>
</div>

我希望每个 v-flex 将填充 100% 的行。然而，他们只填了一半。
https://codepen.io/anon/pen/mKBMEW

不过，我可以在 v-layout 中添加 prop d-inline-block。我只是好奇我之前的第一个代码发生了什么。

【问题讨论】：

标签： vue.js vuetify.js

【解决方案1】：

当我使用 Ikbel 的列解决方案时，我的 flex-components max-width 被覆盖为始终为 100%。我所做的是将row wrap 属性赋予v-layout。

【讨论】：

这对我来说是正确的答案。添加wrap 实际上解决了它，而我仍然能够正确使用row。

【解决方案2】：

我认为您需要将column 属性添加到v-layout。

【讨论】：

谢谢，这行得通。那么它究竟做了什么？为什么row attr 不起作用？
由于v-layout 基本上是一个弹性盒子，添加column 属性使其垂直显示项目，自动填充可用宽度。

【解决方案3】：

对于那些再次通过这个的人。

在最新的 vuetify（来自 v2.x，例如 2.4）中，v-col 上不再有 xs，请改用 cols=12。

【讨论】：