4b045f7c
 刘淇
江阴初始化项目
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
|
<template>
<view>
<page-head title="view"></page-head>
<view class="uni-padding-wrap uni-common-mt">
<view class="uni-hello-text">
Flex是Flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。当设置display: flex后，继续给view等容器组件设置flex-direction:
row或column，就可以在该容器内按行或列排布子组件。uni-app推荐使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。
</view>
<view class="uni-title uni-common-mt">
flex-direction: row
<text>\n横向布局</text>
</view>
<view class="uni-flex uni-row">
<view class="flex-item uni-bg-red">A</view>
<view class="flex-item uni-bg-green">B</view>
<view class="flex-item uni-bg-blue">C</view>
</view>
<view class="uni-title uni-common-mt">
flex-direction: column
<text>\n纵向布局</text>
</view>
<view class="uni-flex uni-column">
<view class="flex-item flex-item-V uni-bg-red">A</view>
<view class="flex-item flex-item-V uni-bg-green">B</view>
<view class="flex-item flex-item-V uni-bg-blue">C</view>
</view>
<view class="uni-title uni-common-mt">
更多布局示例
<text>\nflex布局演示</text>
</view>
<view>
<view class="text">纵向布局-自动宽度</view>
<view class="text" style="width: 300rpx;">纵向布局-固定宽度</view>
<view class="uni-flex uni-row">
<view class="text">横向布局-自动宽度</view>
<view class="text">横向布局-自动宽度</view>
</view>
<view class="uni-flex uni-row" style="-webkit-justify-content: center;justify-content: center;">
<view class="text">横向布局-居中</view>
<view class="text">横向布局-居中</view>
</view>
<view class="uni-flex uni-row" style="-webkit-justify-content: flex-end;justify-content: flex-end;">
<view class="text">横向布局-居右</view>
<view class="text">横向布局-居右</view>
</view>
<view class="uni-flex uni-row">
<view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view>
<view class="text" style="-webkit-flex: 1;flex: 1;">横向布局-平均分布</view>
</view>
<view class="uni-flex uni-row" style="-webkit-justify-content: space-between;justify-content: space-between;">
<view class="text">横向布局-两端对齐</view>
<view class="text">横向布局-两端对齐</view>
</view>
<view class="uni-flex uni-row">
<view class="text" style="width: 200rpx;">固定宽度</view>
<view class="text" style="-webkit-flex: 1;flex: 1;">自动占满余量</view>
</view>
<view class="uni-flex uni-row">
<view class="text" style="width: 200rpx;">固定宽度</view>
<view class="text" style="-webkit-flex: 1;flex: 1;">自动占满</view>
<view class="text" style="width: 200rpx;">固定宽度</view>
</view>
<view class="uni-flex uni-row" style="-webkit-flex-wrap: wrap;flex-wrap: wrap;">
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
<view class="text" style="width: 280rpx;">一行显示不全,wrap折行</view>
</view>
<view class="uni-flex uni-row">
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-start;align-items: flex-start;">
<text>垂直居顶</text>
</view>
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
<text>垂直居中</text>
</view>
<view class="text uni-flex" style="-webkit-flex: 1;flex: 1;height: 200rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: flex-end;align-items: flex-end;">
<text>垂直居底</text>
</view>
</view>
</view>
<view class="uni-title uni-common-mt">
组合示例
<text>\nflex布局演示</text>
</view>
<view class="uni-flex uni-row">
<view class="text uni-flex" style="width: 200rpx;height: 220rpx;-webkit-justify-content: center;justify-content: center;-webkit-align-items: center;align-items: center;">
<image src="../../../static/plus.png" style="width: 150rpx;height: 150rpx;"></image>
</view>
<view class="uni-flex uni-column" style="-webkit-flex: 1;flex: 1;-webkit-justify-content: space-between;justify-content: space-between;">
<view class="text" style="height: 120rpx;text-align: left;padding-left: 20rpx;padding-top: 10rpx;">
文字居左，留出左间距
</view>
<view class="uni-flex uni-row">
<view class="text" style="-webkit-flex: 1;flex: 1;">剩余数量</view>
<view class="text" style="-webkit-flex: 1;flex: 1;">立即购买</view>
</view>
</view>
</view>
</view>
</view>
</template>
<script>
export default {
data() {
return {}
}
}
</script>
<style>
.flex-item {
width: 33.3%;
height: 200rpx;
text-align: center;
line-height: 200rpx;
}
.flex-item-V {
width: 100%;
height: 150rpx;
text-align: center;
line-height: 150rpx;
}
.text {
margin: 15rpx 10rpx;
padding: 0 20rpx;
background-color: #ebebeb;
height: 70rpx;
line-height: 70rpx;
text-align: center;
color: #777;
font-size: 26rpx;
}
.desc {
/* text-indent: 40rpx; */
}
.flex-pc {
display: flex;
justify-content: center;
}
</style>
|
