微信小程序样式Flex Box精通课程-Flex项目的属性-align-self（子元素上中下的设置）

align-self（子元素上中下的设置）

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：https://edu.csdn.net/topic/huangjuhua

基础语法

align-self属性允许单个项目有与其他项目不一样的对齐方式，可覆盖align-items属性。
默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch。

.item { align-self: auto | flex-start | flex-end | center | baseline | stretch; }

小程序应用

默认代码和效果
效果如图

Wxml代码

<view class='zong'>
  <view class='fangxing1'>
    <text>01</text>
  </view>
  <view  class='fangxing2'>
    <text>02</text>
  </view>
  <view  class='fangxing3'>
    <text>03</text>
  </view>  
</view>

Wxss代码

.zong{
  display: flex; 
  justify-content: space-around;
}
.fangxing1{
  width: 60px; height: 60px;  
  background-color:  beige;
}
.fangxing2{
  width: 30px; height: 30px;  
  background-color:  beige;
}
.fangxing3{
  width: 90px; height: 90px;  
  background-color:  beige;
}

实例01

效果如图

下面我们设置01区块的align-self的值为flex-end，02区块的align-self的值为center，其他区块不变。

Wxss代码

.zong{
  display: flex; 
  justify-content: space-around;
}
.fangxing1{
  width: 60px; height: 60px;  
  background-color:  beige;
  align-self: flex-end;
}
.fangxing2{
  width: 30px; height: 30px;  
  background-color:  beige;
  align-self:  center;
}
.fangxing3{
  width: 90px; height: 90px;  
  background-color:  beige;
}

欢迎大家收看我的视频教程：微信小程序界面设计布局Flex Box精通课程 （微信小程序界面设计必备技能）