Question

我开始学习Vue.js，但在理解Vuetify的网格系统时遇到了问题。现在，我想将该内容居中。我会说我已经阅读了文档并尝试了许多方法，但是定位元素还是随机的。

有人可以向我解释v-content，v-layout和v-flex吗？

这里是代码。

   <template>
    <v-container>
     <v-layout text-center>
      <v-flex xs4 >
       <v-img
        :src="require('../assets/logo.svg')"
        class="my-3"
        contain
        height="200"
       >
       </v-img>
       <v-text-field v-model="newPrice" placeholder="Add price"></v-text-field>
       <v-btn @click="addPrices">Add price </v-btn>
       <v-text-field v-model="newVolume" placeholder="Add volume"></v-text-field>
       <v-btn @click="AddVolume">Add volume </v-btn>
      </v-flex>
     </v-layout>
    </v-container>
   </template>
   <script>
   export default {
    name: 'MainPage',
    data () {
     return {
      prices: [],
      volumes: [],
      newPrice: '',
      newVolume: ''
    }
   },
    methods: {
     addPrices () {
      this.prices.push(this.newPrice)
     },
    addVolume () {
      this.volumes.push(this.newVolume)
      }
    }
  }
</script>

Answer 1

因此vuetify的网格系统利用了CSS flexbox的优势。 v-container确定元素周围和元素之间的间距； v-layout确定元素的弯曲轴/方向/顺序，v-flex确定元素在12点网格系统中的大小。

要使内容居中，请尝试以下操作： <v-layout row justify-center></v-layout> 这等效于：

.layout {
    display: flex;
    flex-direction: row;
    justify-content: center; 
}

v-layout组件中没有名为text-center的道具，所以我猜这就是为什么它没有居中的原因。

Vuetify项目/网格系统中的中心内容

1 个答案: