點燈坊

學而時習之,不亦悅乎

Vuetify 之垂直對齊

Sam Xiao's Avatar 2019-06-30

Flexbox 對於 垂直對齊,主要由 CSS 的 row-directionjustify-content 決定;Vuetify 的 Grid 則提供 columnreversejustify-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

<template>
  <v-container fluid>
    <v-layout column 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>

對 3 個 <div> 做 layout。

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

Top Alignment

vertical000

RGB 靠上對齊,且 123 靠 對齊。

第 2 行

<v-container fluid>
  <v-layout column 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,表示內容 由上至下

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

vertical002

column 相當於 CSS 的 flex-direction: column

vertical001

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

<v-container fluid>
  <v-layout column 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>

columnreverse 表示內容 由下至上

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

vertical003

columnreverse 相當於 CSS 的 flex-direction: column-reverse

vertical004

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

若要使用 reverse 時,要明確指定 column ,因為 CSS 的 flex-directioncolumn-reverse,已經同時包含 columnreverse 資訊,也就是 CSS 只需一個 property,而 Vuetify 需要兩個 props

Bottom Alignment

vertical005

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

<v-container fluid>
  <v-layout column 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>

column 表示內容 由上至下

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

vertical006

<v-layout column 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>

columnreverse 表示內容 由下至上

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

vertical007

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

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

Vertical Center Alignment

vertical008

RGB 垂直置中,且 123 從 開始。

<v-container fluid>
  <v-layout column 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>

column 表示內容 由上至下

justify-center 表示 垂直置中

vertical009

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

vertical010

RGB 垂直置中,且 123 從 開始。

<v-container fluid>
  <v-layout column 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>

columnreverse 表示內容 由下至上

justify-center 表示 垂直置中

Conclusion

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

Reference

Vuetify, Grid system