點燈坊

學而時習之,不亦悅乎

Vuetify 之水平對齊

Sam Xiao's Avatar 2019-06-29

Flexbox 對於 水平對齊,主要由 CSS 的 row-directionjustify-content 決定;Vuetify 的 Grid 則提供 rowreversejustify-startjustify-endjustify-center 等 props,讓我們不用 CSS 即可排版。

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="row1">
      <v-flex xs4 class="item1">1</v-flex>
      <v-flex xs3 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>
.row1 {
  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="row1">
    <v-flex xs4 class="item1">1</v-flex>
    <v-flex xs3 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。

Left Alignment

horizontal000

RGB 靠左對齊,且 123 從 開始。

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

Vuetify 的 grid system 依次使用 <v-container><v-layout><v-flex>

<v-layout> 相當於 CSS 的 display: flex

<v-layout> 沒設定 column props,預設為 row,表示內容 由左至右

<v-flex> 總和小於 12 point,因為 由左至右,相當於 靠左對齊

horizontal001

RGB 靠左對齊,但 123 從 開始。

<v-container fluid>
  <v-layout row reverse justify-end class="row1">
    <v-flex xs4 class="item1">1</v-flex>
    <v-flex xs3 class="item2">2</v-flex>
    <v-flex xs4 class="item3">3</v-flex>
  </v-layout>
</v-container>

rowreverse 表示內容 由右至左

justify-end 表示從尾部開始對齊,因為 由右至左,相當於 靠左對齊

horizontal002

rowreverse 相當於 CSS 的 flex-direction: row-reverse

horizontal003

justify-end 相當於 CSS 的 justify-content: flex-end

Right Alignment

horizontal004

RGB 靠右對齊,但 123 從 開始。

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

若沒特別指定 rowcolumn,預設為 row,表示內容 由左至右

justify-end 表示從尾部開始對齊,相當於 靠右對齊

horizontal006

RGB 靠右對齊,且 123 從 開始。

<v-container fluid>
  <v-layout row reverse justify-start class="row1">
    <v-flex xs4 class="item1">1</v-flex>
    <v-flex xs3 class="item2">2</v-flex>
    <v-flex xs4 class="item3">3</v-flex>
  </v-layout>
</v-container>

rowreverse 表示內容 由右至左

justify-start 表示從頭部開始對齊,因為 由右至左,相當於 靠右對齊

horizontal008

justify-start 相當於 CSS 的 justify-content: flex-start

因為 row reverse 設定不同,所以前者內容為 由左至右,後者為 由右至左,但結果都是 靠右對齊

Horizontal Center Alignment

horizontal009

RGB 水平置中,且 123 從 開始。

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

若沒特別指定 rowcolumn,預設為 row,表示內容 由左至右

justify-center 表示 水平置中

horizontal010

justify-center 相當於 CSS 的 justify-content: center

horizontal011

RGB 水平置中,且 123 從 開始。

<v-container fluid>
  <v-layout row reverse justify-center class="row1">
    <v-flex xs4 class="item1">1</v-flex>
    <v-flex xs3 class="item2">2</v-flex>
    <v-flex xs4 class="item3">3</v-flex>
  </v-layout>
</v-container>

rowreverse 表示內容 由右至左

justify-center 表示 水平置中

Conclusion

  • Flexbox 使得顯示順序不見的與 HTML 相同,而是由 rowreverse,與 justify-startjustify-end 決定
  • 無論是 rowrow reverse,都不影響 justify-center水平置中
  • 儘管使用 Vuetify 的 props 很方便,仍然必須了解其相對應 CSS,因為在 developer tools 看到的是 CSS

Reference

Vuetify, Grid system