Vuetify 之垂直對齊

Flexbox 對於 垂直對齊 ，主要由 CSS 的 row-direction 與 justify-content 決定；Vuetify 的 Grid 則提供 column 、 reverse 、 justify-start 、 justify-end 、 justify-center 等 props，讓我們不必使用 CSS 即可排版。

Top Alignment

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

第 2 行

<v-container fluid>
  <v-layout column row1>
    <v-flex xs4 item1>1</v-flex>
    <v-flex xs3 item2>2</v-flex>
    <v-flex xs4 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，因為 由上至下 ，相當於 靠上對齊 。

column 相當於 CSS 的 flex-direction: column 。

RGB 靠上對齊 ，但 123 從 下 開始。

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

column 與 reverse 表示內容 由下至上 。

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

column 與 reverse 相當於 CSS 的 flex-direction: column-reverse 。

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

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

Bottom Alignment

RGB 靠下對齊 ，但 123 從 上 開始。

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

column 表示內容 由上至下 。

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

<v-layout column reverse justify-start row1>
  <v-flex xs4 item1>1</v-flex>
  <v-flex xs3 item2>2</v-flex>
  <v-flex xs4 item3>3</v-flex>
</v-layout>

column 與 reverse 表示內容 由下至上 。

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

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

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

Vertical Center Alignment

RGB 垂直置中 ，且 123 從 上 開始。

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

column 表示內容 由上至下 。

justify-center 相當於 垂直置中 。

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

column 與 reverse 表示內容 由下至上 。

justify-center 相當於 垂直置中 。