flex布局，align-self

flex布局，align-self

<template>
    <view class="container">
        <view class="green txt" style="height: 200upx;font-size: 20upx;">
            A
        </view>
        <view class="red txt" style="font-size: 40upx;">
            B
        </view>
        <view class="blue txt" style="height: 320upx; font-size: 70upx;">
            C
        </view>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                
            }
        },
        methods: {
             
        }
    }
</script>

<style>
    /* 同级目录 */
 @import url("align-self.css");
</style>

css

 .container{
     /* 定义flex容器 */
     display: flex;
     /* 
                 设置容器内部元素的排列方向 
                row: 定义排列方向 从左到右 
                row-reverse: 从右到左
                column: 从上到下
                column-reverse: 从下到上    
      */
     flex-direction: row;
     
     /*
          设置容器中元素 在交叉轴上的对齐方式
          stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
          flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
          flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
          center: 居中对齐
          baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
      */

     align-items: baseline;
     
     height: 800upx;
     background-color: #FFC0CB;
     
    }
      
    .txt{
        font-size: 20px;
         150upx;
        height: 150upx;
    }
      
    .red{
        background-color: red;
        
        /*
           重写容器中元素在交叉轴上的对齐方式
           auto: 默认， 表示继承父级元素的 align-items属性
           stretch: 当元素的高度没有设置， 则元素的高度 会拉伸至 容器高度一致 (默认)
           flex-start: 在交叉轴上向 起点位置(向上/向左) 对齐
           flex-end: 在交叉轴上向上结束位置(向下/向右) 对齐
           center: 居中对齐
           baseline: 保证元素中的文字 在同一条基准线 (保证每个文字都在同一条线上)
         */
        align-self: center;
    }
    
    .green{
        background-color: green;
    }
    
    .blue{
        background-color: blue;
    }