1、align-self属性定义flex子项单独在侧轴（纵轴）方向上的对齐方式。

2、align-self多了个auto（默认值），表示继承自flex容器的align-items属性值。

实例

.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;
     width: 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;
}