Vuetify 之 Grid System 初體驗

如同 Bootstrap，Vuetify 也內建以 Flexbox 為基礎的 Grid System，透過內建 Component，我們不使用 CSS 即可 RWD 排版；雖然不用寫 CSS，但 Flexbox 觀念仍是必須的。

Version

macOS Mojave 10.14.5

Node 12.4.0

Vue CLI 3.8.4

Vue 2.6.10

Vuetify 1.5.5

Chrome 75.0.3770.100

Vue File

App.vue

<template>
  <v-container fluid>
    <v-layout box>
      <v-flex xs4 item1>1</v-flex>
      <v-flex xs4 item2>2</v-flex>
      <v-flex xs4 item3>3</v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style scoped>
.box {
  background-color: #d3d3d3;
  height: 240px;
}

.item1 {
  background-color: #faa;
}

.item2 {
  background-color: #afa;
}

.item3 {
  background-color: #aff;
}
</style>

第 1 行

<template>
  <v-container fluid>
    <v-layout box>
      <v-flex xs4 item1>1</v-flex>
      <v-flex xs4 item2>2</v-flex>
      <v-flex xs4 item3>3</v-flex>
    </v-layout>
  </v-container>
</template>

對 3 個 <div> 做 layout。

但已經看不到 <div> ，取而代之是 Vuetify 所提供的 component。

Use Flexbox

第 2 行

<v-container fluid>

使用 Vuetify 的 grid system，最外層為 <v-container> ，預設會 置中 ，它有很多 props 可用，其中 fluid 表示 滿版 。

從 CSS 角度可發現 <v-container> 主要目的是設定 width: 100% 與 margin: auto 。

而 fluid 是設定 max-width: 100% 。

可以發現 <v-container> 本質仍是 <div> ，只是套用了適當 CSS class 而已

第 3 行

<v-layout box>

Grid system 第二層要使用 <v-layout> ，類似 <table> 的 <tr> 角色，主要設定該 row 使用 flexbox。

box 是自訂 class，主要設定背景色與高度，就不是那麼重要了。

從 CSS 角度可發現設定了 display: flex ，表示使用 flexbox，且 flex-wrap 為 nowrap 。

可以發現 <v-layout> 本質仍是 <div> ，只是套用了適當 CSS class 而已

第 4 行

<v-flex xs4 item1>1</v-flex>

Grid system 第三層要使用 <v-flex> ，類似 <table> 的 <td> 角色，主要設定該 row 實際 item。

xs4 的 xs 表示 extra small device 下， 4 表示在 12 point grid system 下佔 4 等分。

從 CSS 角度可發現設定了 flex: 1 1 auto 。

從 CSS 角度可發現 flex-basis 為 33.33% ，也就是 100 * (4 / 12) = 33.33% ，因此三分了 container。

Vuetify 的 grid system，都是以 <v-container> -> <v-layout> -> <v-flex> 架構，再由內建 CSS class 以 component 的 props 描述

Equals Container Width

RGB 由左向右 均分 container。

<v-container fluid>
  <v-layout box>
    <v-flex xs4 item1>1</v-flex>
    <v-flex xs4 item2>2</v-flex>
    <v-flex xs4 item3>3</v-flex>
  </v-layout>
</v-container>

Flexbox 預設 橫向顯示 而不換行，因為三個 <v-flex> 都是 xs4 ，加起來等於 12 point，因此均分 container。

Smaller then Container Width

RGB 由左向右 伸展，總和小於 12 point。

<v-container fluid>
  <v-layout box>
    <v-flex xs3 item1>1</v-flex>
    <v-flex xs4 item2>2</v-flex>
    <v-flex xs3 item3>3</v-flex>
  </v-layout>
</v-container>

三個 v-flex 各為 xs3 、 xs4 與 xs3 ，總和小於 12 point，由於 item 是 由左往右 ，長到 10 point 就停止。

Larger than Container Width

RGB 由左向右 伸展，總和大於 12 point。

<v-container fluid>
  <v-layout box>
    <v-flex xs5 item1>1</v-flex>
    <v-flex xs4 item2>2</v-flex>
    <v-flex xs5 item3>3</v-flex>
  </v-layout>
</v-container>

三個 v-flex 各為 xs5 、 xs4 與 xs5 ，總和大於 12 point，會以 5 : 4 : 5 按比例分配 container 寬度。

Auto Wrap

RGB 由左向右 伸展，若 v-flex 總和大於 12 point，則換行顯示。

<v-container fluid>
  <v-layout wrap box>
    <v-flex xs5 item1>1</v-flex>
    <v-flex xs4 item2>2</v-flex>
    <v-flex xs5 item3>3</v-flex>
  </v-layout>
</v-container>

三個 v-flex 各為 xs5 、 xs4 與 xs5 ，總和大於 12 point，但 <v-layout> 多了 wrap props，相當於 CSS 的 flex-wrap: wrap ，因此 item 3 的 xs5 會換行顯示。