點燈坊

學而時習之,不亦悅乎

Vuetify 之 Cross Axis 與 Wrap 對齊

Sam Xiao's Avatar 2019-07-14

<v-layout> 除了提供 align-start props 外,還提供了 align-content-start,若只從官網文件,很難看出其差異,事實上 align-content-start 就是 CSS 的 align-content: start

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

<template>
  <v-container fluid class="box">
    <v-layout wrap>
      <v-flex xs4 class="item">
        <h1>1</h1>
      </v-flex>
      <v-flex xs4 class="item">
        <h1>2</h1>
      </v-flex>
      <v-flex xs4 class="item">
        <h1>3</h1>
      </v-flex>
      <v-flex xs4 class="item">
        <h1>4</h1>
      </v-flex>
      <v-flex xs4 class="item">
        <h1>5</h1>
      </v-flex>
      <v-flex xs4 class="item">
        <h1>6</h1>
      </v-flex>
    </v-layout>
  </v-container>
</template>

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

<style>
body {
  margin: 8px;
}
</style>

<style scoped>
.box {
  background: #d3d3d3;
  width: 900px;
  height: 300px;
  margin: 0;
  padding: 0;
}

.item {
  background: #faa;
  min-height: 50px;
  margin: 5px;
}
</style>

<v-container> 下有 6 個 <v-flex>

第 3 行

<v-layout wrap>

<v-layout> 特別加上 wrap props,,因為 align-content 系列 props 一定要搭配 wrap 才有用。

content000

warp 相當於 CSS 的 flex-wrap: wrap,也就是當 item 寬度大於 container 時,會自動換行顯示,特別適合 RWD。

Stretch

content001

6 個 item 在 cross axis 方向均分 container。

<template>
  <v-container fluid class="box">
    <v-layout wrap fill-height>
      <v-flex xs4 class="item">
        <h1>1</h1>
      </v-flex>
      ...
    </v-layout>
  </v-container>
</template>

CSS 預設 align-content 就是 stretch,但 Vuetify 必須加上 fill-height props。

content002

fill-height 相當於 height: 100%,因此高度會自動延展使用 container 剩餘高度。

Align Content Start

content003

Container 內所有 item 在 cross axis 方向皆 靠上對齊

<template>
  <v-container fluid class="box">
    <v-layout wrap fill-height align-content-start>
      <v-flex xs4 class="item">
        <h1>1</h1>
      </v-flex>
      ...
    </v-layout>
  </v-container>
</template>

align-content-start 表示將從 cross axis 起始對齊,因為 cross axis 為 column 由上至下,相當於 靠上對齊

content004

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

Align Content End

content005

Container 內所有 item 在 cross axis 方向皆 靠下對齊

<template>
  <v-container fluid class="box">
    <v-layout wrap fill-height align-content-end>
      <v-flex xs4 class="item">
        <h1>1</h1>
      </v-flex>
      ...
    </v-layout>
  </v-container>
</template>

align-content-start 表示將從 cross axis 結尾對齊,因為 cross axis 為 column 由上至下,相當於 靠下對齊

content006

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

Align Content Center

content007

Container 內所有 item 在 cross axis 方向皆 置中對齊

<template>
  <v-container fluid class="box">
    <v-layout wrap fill-height align-content-center>
      <v-flex xs4 class="item">
        <h1>1</h1>
      </v-flex>
      ...
    </v-layout>
  </v-container>
</template>

align-content-start 表示將從 cross axis 置中對齊,因為 cross axis 為 column 由上至下,相當於 垂直置中

content008

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

Align Content Space Between

content009

Item 在 cross axis 間距均分 container 剩餘高度,且首尾 item 前後不包含間距。

<template>
  <v-container fluid class="box">
    <v-layout wrap fill-height align-content-space-between>
      <v-flex xs4 class="item">
        <h1>1</h1>
      </v-flex>
      ...
    </v-layout>
  </v-container>
</template>

align-content-space-between 表示:

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

content010

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

Align Content Space Around

content011

Item 在 cross axis 間距均分 container 剩餘高度,且首尾 item 間距為一般間距的一半。

<template>
  <v-container fluid class="box">
    <v-layout wrap fill-height align-content-space-around>
      <v-flex xs4 class="item">
        <h1>1</h1>
      </v-flex>
      ...
    </v-layout>
  </v-container>
</template>

align-content-space-around 表示:

  • <v-flex><v-flex> 間隔平分 container 剩餘高度
  • 第一個 <v-flex> 與最後一個 <v-flex> 前後間距為一般間距一半

content013

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

Align Content Space Evenly

content012

Item 在 cross axis 間距均分 container 剩餘高度,且首尾 item 間距與一般間距相等。

<template>
  <v-container fluid class="box">
    <v-layout wrap fill-height class="align-content-space-evenly">
      <v-flex xs4 class="item">
        <h1>1</h1>
      </v-flex>
      ...
    </v-layout>
  </v-container>
</template>

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

Vuetify 尚未支援 align-content-space-evenly,只能自行增加 align-content-space-evenly class。

Conclusion

  • Vuetify 文件大都微言大意,有時很難看出其差異,最好方式就是用 Chrome developer tools 觀察其 CSS,由 CSS 去理解該 props 意義
  • align-content 系列 props,對應的就是 CSS 的 align-conten property,共有 align-content-startalign-content-endalign-content-centeralign-content-space-betweenalign-content-space-around
  • align-content 系列 props 要搭配 wrapfill-height 才會發生作用
  • align-content: space-evenly 屬較新 CSS,Vuetify 尚未以 props 支援,必須自訂 class

Reference

Vuetify, Grid system