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

align-self(子元素上中下的设置)

基础语法

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

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

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

小程序应用

默认代码和效果
效果如图
微信小程序样式Flex Box精通课程-Flex项目的属性-align-self(子元素上中下的设置)

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

效果如图
微信小程序样式Flex Box精通课程-Flex项目的属性-align-self(子元素上中下的设置)

下面我们设置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
微信小程序样式Flex Box精通课程-Flex项目的属性-align-self(子元素上中下的设置)