flex布局，align-items

flex布局，align-items

 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-items.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     .green{
40         background-color: green;
41     }
42     
43     .blue{
44         background-color: blue;
45     }
46  

 

转载于:https://www.cnblogs.com/wo1ow1ow1/p/11124337.html