内容简介:Flexbox 對於RGB
Flexbox 對於 垂直對齊 ,主要由 CSS 的 row-direction 與 justify-content 決定;Vuetify 的 Grid 則提供 column 、 reverse 、 justify-start 、 justify-end 、 justify-center 等 props,讓我們不必使用 CSS 即可排版。
Top Alignment
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,因為 由上至下 ,相當於 靠上對齊 。
column 相當於 CSS 的 flex-direction: column 。
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>
column 與 reverse 表示內容 由下至上 。
justify-end 表示從尾部開始對齊,因為 由下至上 ,相當於 靠上對齊 。
column 與 reverse 相當於 CSS 的 flex-direction: column-reverse 。
justify-end 相當於 CSS 的 justify-content: flex-end 。
若要使用 reverse 時,要明確指定 column ,因為 CSS 的 flex-direction 為 column-reverse ,已經同時包含 column 與 reverse 資訊,也就是 CSS 只需一個 property,而 Vuetify 需要兩個 props
Bottom Alignment
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 表示從尾部開始對齊,因為 由上至下 ,相當於 靠下對齊 。
<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>
column 與 reverse 表示內容 由下至上 。
justify-start 表示從頭部開始對齊,因為 由下至上 ,相當於 靠下對齊 。
justify-start 相當於 CSS 的 justify-content: flex-start 。
因為 row reverse 設定不同,所以前者內容為 由上至下 ,後者為 由下至上 ,但結果都是 靠下對齊
Vertical Center Alignment
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 相當於 垂直置中 。
justify-center 相當於 CSS 的 justify-content: center 。
column 與 reverse 表示內容 由下至上 。
justify-center 相當於 垂直置中 。
以上所述就是小编给大家介绍的《Vuetify 之垂直對齊》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
HTML 压缩/解压工具
在线压缩/解压 HTML 代码
HEX CMYK 转换工具
HEX CMYK 互转工具