Vuetify笔记(2):栅格下v-layout和v-flex

      Vuetify拥有一个12点的栅格系统，它使用flex-box构建，栅格用于布局应用程序的内容。它包含5种类型的媒体断点，用于定位特定的屏幕大小或方向。栅格组件的属性实际上是从它们定义的属性派生的类，这允许您轻松地将这些辅助类指定为属性，同时仍然提供在任何地方使用的类；其实vuetify的栅格与bootstrap的栅格系统是类似的。

   其中v-layout就是对应栅格中的一行，而v-flex对应的就是一列；

【v-layout应用】

 <v-layout row wrap>
....................
 </v-layout>

 

【v-fiex】

     <v-flex xs12 sm10>      
        <v-tree url="/item/category/list"
                :isEdit="isEdit"
                @handleAdd="handleAdd"
                @handleEdit="handleEdit"
                @handleDelete="handleDelete"
                @handleClick="handleClick"
        />
      </v-flex>

【综合应用例子】

  <v-layout class="px-4 pb-3" >
        <v-flex xs2>
          <v-btn  class="info">新增品牌</v-btn>
        </v-flex>
        <v-spacer />
        <v-flex xs6>
          <v-text-field   label="搜索" hide-details append-icon="search" v-model="key"></v-text-field>
        </v-flex>
      </v-layout>

意思代码中的px-4表示x轴边距为4，pb-3表示底部边距为3；以及 <v-spacer />表示自动填充，这个很常用。