内容简介:Flexbox 對於macOS Mojave 10.14.5Node 12.4.0
Flexbox 對於 水平對齊
,主要由 CSS 的 row-direction
與 justify-content
決定;Vuetify 的 Grid 則提供 row
、 reverse
、 justify-start
、 justify-end
、 justify-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
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,因為 由左至右
,相當於 靠左對齊
。
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>
row
與 reverse
表示內容 由右至左
。
justify-end
表示從尾部開始對齊,因為 由右至左
,相當於 靠左對齊
。
row reverse
相當於 CSS 的 flex-direction: row-reverse
。
justify-end
相當於 CSS 的 justify-content: flex-end
。
若要使用 reverse
時,要明確指定 row
或 column
,因為 CSS 的 flex-direction
為 row-reverse
,已經同時包含 row
與 reverse
資訊,也就是 CSS 只需一個 property,而 Vuetify 需要兩個 props
Right Alignment
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>
若沒特別指定 row
或 column
,預設為 row
,表示內容 由左至右
。
justify-end
表示從尾部開始對齊,相當於 靠右對齊
。
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>
row
與 reverse
表示內容 由右至左
。
justify-start
表示從頭部開始對齊,因為 由右至左
,相當於 靠右對齊
。
justify-start
相當於 CSS 的 justify-content: flex-start
。
因為 row reverse
設定不同,所以前者內容為 由左至右
,後者為 由右至左
,但結果都是 靠右對齊
Horizontal Center Alignment
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>
若沒特別指定 row
或 column
,預設為 row
,表示內容 由左至右
。
justify-center
相當於 水平置中
。
justify-center
相當於 CSS 的 justify-content: center
。
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>
row
與 reverse
表示內容 由右至左
。
justify-center
相當於 水平置中
。
以上所述就是小编给大家介绍的《Vuetify 之水平對齊》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- Java程序员怎样才能在两年内,技术水平达到月薪2w的水平呢!
- 水平分库如何做到平滑扩展
- Redis集群水平扩展(二)
- Redis集群水平扩展(一)
- html – 水平滚动的图像列表
- 如何识别人的技术能力和水平?
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。