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 />表示自動填充，這個很常用。