Vuetify 之水平對齊

栏目: CSS · 发布时间: 5年前

内容简介:Flexbox 對於macOS Mojave 10.14.5Node 12.4.0

Flexbox 對於 水平對齊 ,主要由 CSS 的 row-directionjustify-content 決定;Vuetify 的 Grid 則提供 rowreversejustify-startjustify-endjustify-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

Vuetify 之水平對齊

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,因為 由左至右 ,相當於 靠左對齊

Vuetify 之水平對齊

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>

rowreverse 表示內容 由右至左

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

Vuetify 之水平對齊

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

Vuetify 之水平對齊

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

若要使用 reverse 時,要明確指定 rowcolumn ,因為 CSS 的 flex-directionrow-reverse ,已經同時包含 rowreverse 資訊,也就是 CSS 只需一個 property,而 Vuetify 需要兩個 props

Right Alignment

Vuetify 之水平對齊

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>

若沒特別指定 rowcolumn ,預設為 row ,表示內容 由左至右

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

Vuetify 之水平對齊

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>

rowreverse 表示內容 由右至左

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

Vuetify 之水平對齊

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

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

Horizontal Center Alignment

Vuetify 之水平對齊

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>

若沒特別指定 rowcolumn ,預設為 row ,表示內容 由左至右

justify-center 相當於 水平置中

Vuetify 之水平對齊

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

Vuetify 之水平對齊

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>

rowreverse 表示內容 由右至左

justify-center 相當於 水平置中


以上所述就是小编给大家介绍的《Vuetify 之水平對齊》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

逆流而上

逆流而上

阿里巴巴集团成长集编委会 / 电子工业出版社 / 2017-11 / 59.00

本书是阿里巴巴集团荣耀背后的技术血泪史。全书通过分享业务运行过程中各个领域发生的典型“踩坑”案例,帮助大家快速提升自我及团队协作,学习到宝贵的处理经验及实践方案,为互联网生产系统的稳定共同努力。从基础架构、中间件、数据库、云计算、大数据等技术领域中不断积累经验,颠覆技术瓶颈,不断创新以适应不断增长的需求。 本书主要面向互联网技术从业人员和在校师生,使读者能够通过此书基本了解阿里在各技术领域的能力,......一起来看看 《逆流而上》 这本书的介绍吧!

随机密码生成器
随机密码生成器

多种字符组合密码

URL 编码/解码
URL 编码/解码

URL 编码/解码

MD5 加密
MD5 加密

MD5 加密工具