微信小程序flex box界面设计入门到精通-13课-Flex项目的属性-align-self垂直对齐

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

<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>

.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;

}

.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;

}