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

查看所有标签

猜你喜欢:

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

CSS揭秘

CSS揭秘

[希] Lea Verou / CSS魔法 / 人民邮电出版社 / 2016-4 / 99.00元

本书是一本注重实践的教程,作者为我们揭示了 47 个鲜为人知的 CSS 技巧,主要内容包括背景与边框、形状、 视觉效果、字体排印、用户体验、结构与布局、过渡与动画等。本书将带领读者循序渐进地探寻更优雅的解决方案,攻克每天都会遇到的各种网页样式难题。 本书的读者对象为前端工程师、网页开发人员。一起来看看 《CSS揭秘》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

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

URL 编码/解码

html转js在线工具
html转js在线工具

html转js在线工具