Vuetify 之水平對齊

Flexbox 對於 水平對齊 ，主要由 CSS 的 row-direction 與 justify-content 決定；Vuetify 的 Grid 則提供 row 、 reverse 、 justify-start 、 justify-end 、 justify-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

Left Alignment

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

App.vue

<template>
  <v-container fluid>
    <v-layout 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>
</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 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，預設為 row ，表示內容 由左至右 。

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

RGB 靠左對齊 ，但 123 從 右 開始。

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

row 與 reverse 表示內容 由右至左 。

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

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

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

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

Right Alignment

RGB 靠右對齊 ，但 123 從 左 開始。

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

若沒特別指定 row 或 column ，預設為 row ，表示內容 由左至右 。

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

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

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

row 與 reverse 表示內容 由右至左 。

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

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

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

Horizontal Center Alignment

RGB 水平置中 ，且 123 從 左 開始。

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

若沒特別指定 row 或 column ，預設為 row ，表示內容 由左至右 。

justify-center 相當於 水平置中 。

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

RGB 水平置中 ，且 123 從 右 開始。

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

row 與 reverse 表示內容 由右至左 。

justify-center 相當於 水平置中 。