點燈坊

學而時習之,不亦悅乎

Vuetify 之間隔等距

Sam Xiao's Avatar 2019-06-30

Flexbox 對於 間隔等距,主要由 justify-contentspace 系列設定;Vuetify 的 Grid 則提供 justify-space-betweenjustify-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 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 justify-space-between 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。

Space Between

space000

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

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

justify-space-between 表示:

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

space001

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

Space Around

space002

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

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

justify-space-around 表示:

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

space003

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

Space Evenly

space004

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

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

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。

space005

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

Conclusion

  • justify-content: space-evenly 屬較新 CSS,Vuetify 尚未以 props 支援,ˊ必須自訂 class

Reference

Vuetify, Grid system