Vuetify 之間隔等距

Flexbox 對於 間隔等距 ，主要由 justify-content 的 space 系列設定；Vuetify 的 Grid 則提供 justify-space-between 與 justify-space-around 等 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 justify-space-between 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 justify-space-between 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>

對 3 個 <div> 做 layout。

但已經看不到 <div> 與 CSS class，取而代之是 Vuetify 的 component 與 props。

Space Between

RGB 並沒有均分 container，但 紫色 間距是相等的。

<v-container fluid>
  <v-layout justify-space-between 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 ，表示內容 由左至右 。

justify-space-between 表示：

• <v-flex> 與 <v-flex> 間隔平分 <v-container> 剩下寬度
• 第一個 <v-flex> 與最後一個 <v-flex> 都貼齊 <v-container> ，不使用 <v-container> 剩下寬度

justify-space-between 相當於 CSS 的 justify-content: space-between 。

Space Around

RGB 並沒有均分 container，兩側間距為中間間距的一半。

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

justify-space-around 表示：

• <v-flex> 與 <v-flex> 間隔平分 container 剩下寬度
• 第一個 <v-flex> 與最後一個 <v-flex> 也會使用 <v-container> 剩下寬度，但只有 <v-flex> 與 <v-flex> 間寬度一半

justify-space-around 相當於 CSS 的 justify-content: space-around 。

Space Evenly

RGB 並沒有均分 container，兩側間距與中間間距相同。

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

justify-space-evenly 表示：

• <v-flex> 與 <v-flex> 間隔平分 v-container 剩下寬度
• 第一個 <v-flex> 與最後一個 <v-flex> 也會使用 <v-container> 剩下寬度，與 <v-flex> 與 <v-flex> 間寬度相等

<style scoped>
.justify-space-evenly {
  justify-content: space-evenly;
}
</style>

Vuetify 目前並沒有提供 justify-space-evenly props，若要達成相同效果，只能自己定義 justify-space-evenly class。

使用自行定義的 justify-space-evenly class。

Conclusion

• 實務上 justify-space-between 與 justify-space-around 較常使用，也因此 Vuetify 沒有提供 justify-space-evenly