内容简介: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 之垂直對齊》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
Types and Programming Languages
Benjamin C. Pierce / The MIT Press / 2002-2-1 / USD 95.00
A type system is a syntactic method for automatically checking the absence of certain erroneous behaviors by classifying program phrases according to the kinds of values they compute. The study of typ......一起来看看 《Types and Programming Languages》 这本书的介绍吧!