新 vuetify API 的 Flex 列布局

Question

谁能告诉我如何使用行和列而不是 v-layout 和 v-flex 来调整新的 vuetify 语法的代码？我尝试了很多，但无法让它工作。

<div id="app">
  <v-app id="inspire">
    <v-container fluid fill-height class="grey lighten-5 flex-column">
      <v-layout column no-gutters style="width: 100%">
        <v-flex xs10 class="red pa-4">
            <div class="text-h4">1st Layout</div>
        </v-flex>
        <v-flex xs2 class="yellow pa-4">
            <div class="text-h4">2nd Layout</div>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</div>

链接到codepen： https://codepen.io/anindyamanna/pen/oNLBQbW?editable=true&editors=101%3Dhttps%3A%2F%2Fvuetifyjs.com%2F

Answer 1

将v-layout 替换为v-row，然后将v-flex 替换为v-col，如docs 中所述。 我假设你想实现两列并排放置，占据整个宽度。

<v-row style="width: 100%;" no-gutters>
  <v-col cols="10" class="red pa-4"><div class="text-h4">1st Layout</div></v-col>
  <v-col cols="2" class="yellow pa-4"><div class="text-h4">2nd Layout</div></v-col>
</v-row>

由于您想将 div 放在彼此的顶部，因此您必须将 d-flex 和 flex-column 添加到您的 <v-row> 中，这样它就会有一个 display: flex。然后，您需要将<v-col> 的最大宽度覆盖为100%；

<v-row class="d-flex flex-column" style="width: 100%;" no-gutters>
  <v-col cols="10" class="red pa-4" style="max-width: 100%">
    <div class="text-h4">1st Layout</div>
  </v-col>
  <v-col cols="2" class="yellow pa-4" style="max-width: 100%">
    <div class="text-h4">2nd Layout</div>
  </v-col>
</v-row>

这是一个演示：https://codepen.io/blackraspberry08/pen/OJXmLpR