web-dev-qa-db-ja.com

vuetify v-flexxs12は幅の半分しか埋めません

Vuetifyv-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.jsvuetify.js
4
Restu Utomo

column属性をv-layoutに追加する必要があると思います。

3
Ikbel

Ikbelの列ソリューションを使用したとき、flex-componentsのmax-widthが常に100％になるように上書きされました。私がしたことは、row wrap属性をv-layoutに与えることです。

5
brawlz