align-self（子元素上中下的設定）

基礎語法

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精通課程 https://edu.csdn.net/course/detail/10624