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 之水平對齊》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

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

第二曲线:跨越“S型曲线”的二次增长

第二曲线:跨越“S型曲线”的二次增长

[英]查尔斯·汉迪(Charles Handy) / 苗青 / 机械工业出版社 / 2017-6 / 49.00

S型曲线是每个组织和企业在预测未来时一定会参考的工具,一切事物的发展都逃不开S型曲线(“第一曲线”)。 然而,从公司组织、企业治理、市场的变化,到个人职业发展、社会人际关系以及未来的教育与社会价值,多维度地探讨这个世界需要重新以不同的角度来思考问题,不能够总是停留在“第一曲线”的世界。 如果组织和企业能在第一曲线到达巅峰之前,找到带领企业二次腾飞的“第二曲线”,并且第二曲线必须在第一曲......一起来看看 《第二曲线:跨越“S型曲线”的二次增长》 这本书的介绍吧!

CSS 压缩/解压工具
CSS 压缩/解压工具

在线压缩/解压 CSS 代码

SHA 加密
SHA 加密

SHA 加密工具

UNIX 时间戳转换
UNIX 时间戳转换

UNIX 时间戳转换