Vuetify 之垂直對齊

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

内容简介:Flexbox 對於RGB

Flexbox 對於 垂直對齊 ,主要由 CSS 的 row-directionjustify-content 決定;Vuetify 的 Grid 則提供 columnreversejustify-startjustify-endjustify-center 等 props,讓我們不必使用 CSS 即可排版。

Top Alignment

Vuetify 之垂直對齊

RGB 靠上對齊 ,且 123 靠 對齊。

第 2 行

<v-container fluid>
  <v-layout column 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,表示內容 由上至下

<v-flex> 總和小於 12 point,因為 由上至下 ,相當於 靠上對齊

Vuetify 之垂直對齊

column 相當於 CSS 的 flex-direction: column

Vuetify 之垂直對齊

RGB 靠上對齊 ,但 123 從 開始。

<v-container fluid>
  <v-layout column 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>

columnreverse 表示內容 由下至上

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

Vuetify 之垂直對齊

columnreverse 相當於 CSS 的 flex-direction: column-reverse

Vuetify 之垂直對齊

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

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

Bottom Alignment

Vuetify 之垂直對齊

RGB 靠下對齊 ,但 123 從 開始。

<v-container fluid>
  <v-layout column 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>

column 表示內容 由上至下

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

Vuetify 之垂直對齊

<v-layout column 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>

columnreverse 表示內容 由下至上

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

Vuetify 之垂直對齊

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

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

Vertical Center Alignment

Vuetify 之垂直對齊

RGB 垂直置中 ,且 123 從 開始。

<v-container fluid>
  <v-layout column 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>

column 表示內容 由上至下

justify-center 相當於 垂直置中

Vuetify 之垂直對齊

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

Vuetify 之垂直對齊

columnreverse 表示內容 由下至上

justify-center 相當於 垂直置中


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

查看所有标签

猜你喜欢:

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

宇宙涟漪中的孩子

宇宙涟漪中的孩子

谢云宁 / 四川科学技术出版社 / 2017-11 / 28.00元

近未来。日冕科技公司通过建造围绕太阳的光幕搜集了近乎无穷的能源,这些能源主要用于地球上的网络空间建设。随着全球网络时间频率的不断提升,越来越多的人选择接驳进虚拟空间,体验现实中难以经历的丰富人生。 网络互动小说作者宁天穹一直自认为是这些人中普通的一员,有一天却被一名读者带进反抗组织,了解到日冕公司的各种秘密,并被告知自己的小说将在抵抗运动中起到重要作用。 起初他拒绝参与,但看到地球被笼......一起来看看 《宇宙涟漪中的孩子》 这本书的介绍吧!

RGB转16进制工具
RGB转16进制工具

RGB HEX 互转工具

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

URL 编码/解码

XML、JSON 在线转换
XML、JSON 在线转换

在线XML、JSON转换工具