點燈坊

學而時習之,不亦悅乎

Vuetify 之 Cross Axis 對齊

Sam Xiao's Avatar 2019-07-09

Flexbox 對於 Cross Axis 對齊,主要由 CSS 的 align-items 決定;Vuetify 的 Grid 則提供 align-startalign-endalign-centeralign-baselinealign-self 等 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
CSS 3
Chrome 75.0.3770.100

Vue File

App.vue

<template>
  <v-container fluid class="box">
    <v-layout>
      <v-flex xs4 class="article">
        <header>
          <h1>Boston</h1>
        </header>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi asperiores debitis dolorem ducimus esse fugiat id libero minima minus, mollitia necessitatibus nostrum odit porro quaerat quia quod sint velit vero!
        </p>
      </v-flex>
      <v-flex xs4 class="article">
        <header>
          <h1>New York</h1>
        </header>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. Hic, nulla.
        </p>
      </v-flex>
      <v-flex xs4 class="article">
        <header>
          <h1>Chicago</h1>
        </header>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit. A aliquam animi asperiores at atque consectetur dolore dolorem ducimus ea error et expedita inventore ipsa iusto laboriosam laudantium magnam modi molestias nam nemo non numquam odit perspiciatis provident quaerat, quas qui quidem quos reiciendis reprehenderit saepe sit tenetur ullam unde vitae voluptate voluptatibus. Accusantium consectetur cumque delectus error inventore qui voluptatum?
        </p>
      </v-flex>
    </v-layout>
  </v-container>
</template>

<script>
export default {
  name: 'App',
}
</script>

<style scoped>
.box {
  background-color: #666;
  padding-left: 5px;
  padding-right: 5px;
}

.article {
  background: #fff;
  margin: 5px;
}
</style>

<v-container> 下有 3 個 <v-flex>,各自內文長短不一。

Main Axis vs. Cross Axis

align-items000

Vuetify grid system 有兩個 axis:

  • Main axiosrowcolumn props 所設定方向
  • Cross axios:與 main axis 垂直方向

Stretch

cross001

<v-container> 內 3 個 <v-flex> 同高。

<v-container fluid class="box">
  <v-layout>
    <v-flex xs4 class="article">
      ...
    </v-flex>
    <v-flex xs4 class="article">
      ...
    </v-flex>
    <v-flex xs4 class="article">
      ...
    </v-flex>
 </v-layout>
</v-container>

<v-flex> 預設為 row,可以省略不寫,且預設為 stretch,也可省略不寫,也就是在 cross axis 方向會自動 stretch 與 container 同高 (寬)。

由於 <v-container> 沒設定 height,其高度是被最長 <v-flex> 所撐高,較短的 <v-flex> 會自動 stretch 與其同高

Align-start

cross002

<v-container> 內 3 個 <v-flex> 在 cross axis 方向皆 靠上對齊

<v-container fluid class="box">
    <v-layout align-start>
      <v-flex xs4 class="article">
        ...
      </v-flex>
      <v-flex xs4 class="article">
        ...
      </v-flex>
      <v-flex xs4 class="article">
        ...
      </v-flex>
    </v-layout>
  </v-container>

align-start 表示從 cross axis 的頭部開始對齊,因為 cross axis 為 column,為 由上至下,相當於 靠上對齊

cross003

align-start 相當於 CSS 的 align-items: flex-start

Align-end

cross004

<v-container> 內 3 個 <v-flex> 在 cross axis 方向皆 靠下對齊

<v-container fluid class="box">
    <v-layout align-end>
      <v-flex xs4 class="article">
        ...
      </v-flex>
      <v-flex xs4 class="article">
        ...
      </v-flex>
      <v-flex xs4 class="article">
        ...
      </v-flex>
    </v-layout>
  </v-container>

align-end 表示從 cross axis 的尾部開始對齊,因為 cross axis 為 column,為 由上至下,相當於 靠下對齊

cross007

align-end 相當於 CSS 的 align-items: flex-end

Align-center

cross005

<v-container> 內 3 個 <v-flex> 在 cross axis 方向皆 垂直置中

<v-container fluid class="box">
    <v-layout align-center>
      <v-flex xs4 class="article">
        ...
      </v-flex>
      <v-flex xs4 class="article">
        ...
      </v-flex>
      <v-flex xs4 class="article">
        ...
      </v-flex>
    </v-layout>
  </v-container>

align-center 表示對 cross axis 置中對齊,因為 cross axis 為 column,相當於 垂直置中

cross006

align-center 相當於 CSS 的 align-items: center

Align-baseline

cross008

v-container 內 3 個 <v-flex> 在 cross axis 方向皆與 第一行baseline 對齊

<v-container fluid class="box">
    <v-layout align-baseline>
      <v-flex xs4 class="article">
        ...
      </v-flex>
      <v-flex xs4 class="article">
        ...
      </v-flex>
      <v-flex xs4 class="article">
        ...
      </v-flex>
    </v-layout>
  </v-container>

align-baseline 看起來與 align-start 一樣。

cross009

若將 <header> 拿掉,可明顯看出 align-baselinealign-start 差異。

cross010

align-baseline 相當於 CSS 的 align-items: baseline

Align-self

cross011

<v-container> 內第 1 個 <v-flex> 與第 3 個 <v-flex>靠上對齊,但第 2 個 <v-flex>靠下對齊

<v-container fluid class="box">
    <v-layout align-start>
      <v-flex xs4 class="article">
        <header>
          <h1>Boston</h1>
        </header>
        <p>...</p>
      </v-flex>
      <v-flex xs4 align-self-end class="article">
        <header>
          <h1>New York</h1>
        </header>
        <p>...</p>
      </v-flex>
      <v-flex xs4 class="article">
        <header>
          <h1>Chicago</h1>
        </header>
        <p>...</p>
      </v-flex>
    </v-layout>
  </v-container>

第 2 行

<v-layout align-start>

<v-layout> 使用 align-start props,表示其下所有 <v-flex> 都使用 align-start 靠上對齊。

11 行

<v-flex xs4 align-self-end class="article">
  ...
</v-flex>

<v-flex> 使用 align-self-end props,表示只有此 <v-flex>align-end 靠下對齊。

cross012

align-self-end 相當於 CSS 的 align-self: flex-end

Conclusion

  • Vuetify props 有其命名規則,若以 justify 為 prefix,表示適用於 main axis;若以 align 為 prefix,則適用於 cross axis
  • Vuetify 預設為 stretch,會自動 stretch 與 <v-container> 同高 (寬)
  • align-self 系列共有 align-self-startalign-self-endalign-self-centeralign-self-baseline,都只能套用在 <v-flex>

Reference

Vuetify, Grid system