點燈坊

學而時習之,不亦悅乎

Vuetify 之 Grid System 初體驗

Sam Xiao's Avatar 2019-06-28

如同 Bootstrap,Vuetify 也內建以 Flexbox 為基礎的 Grid System,透過內建 Component,我們不必使用 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 class="box">
      <v-flex xs4 class="item1">1</v-flex>
      <v-flex xs4 class="item2">2</v-flex>
      <v-flex xs4 class="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>

第 2 行

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

對 3 個 <div> 做 layout。

發現 CSS class 只剩下客製化部分,取而代之是 Vuetify 的 component 與 props。

Use Flexbox

第 2 行

<v-container fluid>

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

overview000

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

overview001

fluid 是設定 max-width: 100%

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

第 3 行

<v-layout class="box">

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

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

overview002

從 CSS 角度可發現設定了 display: flex ,表示使用 flexbox,且 flex-wrapnowrap

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

第 4 行

<v-flex xs4 class="item1">1</v-flex>

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

xs4xs 表示 extra small device 下,4 表示在 12 point grid system 下佔 4 等分。

overview003

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

overview004

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

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

Equals Container Width

overview005

RGB 由左向右 均分 container。

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

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

Smaller then Container Width

overview006

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

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

三個 v-flex 各為 xs3xs4xs3,總和小於 12 point,由於 item 是 由左往右,長到 10 point 就停止。

Larger than Container Width

overview007

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

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

三個 v-flex 各為 xs5xs4xs5,總和大於 12 point,會以 5 : 4 : 5 按比例分配 container 寬度。

Auto Wrap

overview008

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

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

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

overview009

從 CSS 角度可發現 wrap 相當於 flex-wrap: wrap

Conclusion

  • <v-layout> 預設為 nowrap,若各 <v-flex> 總和小於 12 point 則相安無事;若總和大於 12 point 則依 point 比例分配
  • <v-layout> 若設定為 wrap,若各 <v-flex> 總和小於 12 point 則相安無事;若總和大於 12 point 將換行顯示

Reference

Dilshan Kelsen, Learn How To Use Vuetify’s Grid System
Vuetify, Grid System