flex布局，align-self
1 <template>
2 <view class="container">
3 <view class="green txt" style="height: 200upx;font-size: 20upx;">
4 A
5 </view>
6 <view class="red txt" style="font-size: 40upx;">
7 B
8 </view>
9 <view class="blue txt" style="height: 320upx; font-size: 70upx;">
10 C
11 </view>
12 </view>
13 </template>
14
15 <script>
16 export default {
17 data() {
18 return {
19
20 }
21 },
22 methods: {
23
24 }
25 }
26 </script>
27
28 <style>
29 /* 同级目录 */
30 @import url("align-self.css");
31 </style>
css
1 .container{
2 /* 定义flex容器 */
3 display: flex;
4 /*
5 设置容器内部元素的排列方向
6 row: 定义排列方向 从左到右
7 row-reverse: 从右到左
8 column: 从上到下
9 column-reverse: 从下到上
10 */
11 flex-direction: row;
12
13 /*
14 设置容器中元素 在交叉轴上的对齐方式
15 stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
16 flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
17 flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
18 center: 居中对齐
19 baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
20 */
21
22 align-items: baseline;
23
24 height: 800upx;
25 background-color: #FFC0CB;
26
27 }
28
29 .txt{
30 font-size: 20px;
31 width: 150upx;
32 height: 150upx;
33 }
34
35 .red{
36 background-color: red;
37
38 /*
39 重写容器中元素在交叉轴上的对齐方式
40 auto: 默认， 表示继承父级元素的 align-items属性
41 stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
42 flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
43 flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
44 center: 居中对齐
45 baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
46 */
47 align-self: center;
48 }
49
50 .green{
51 background-color: green;
52 }
53
54 .blue{
55 background-color: blue;
56 }
57
