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

分手后的思念是犯贱 2024-02-19 15:40 14阅读 0赞

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

微信小程序交流群：111733917 | 微信小程序从0基础到就业的课程：[https://edu.csdn.net/topic/huangjuhua][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; }

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

### 小程序应用 ###

默认代码和效果  
效果如图  
![微信小程序样式Flex Box精通课程-Flex项目的属性-align-self（子元素上中下的设置）][Flex Box_-Flex_-align-self 1]

> Wxml代码

> 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（子元素上中下的设置）][Flex Box_-Flex_-align-self 2]

> 下面我们设置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精通课程 （微信小程序界面设计必备技能）][Flex Box_]

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

[https_edu.csdn.net_topic_huangjuhua]: https://edu.csdn.net/topic/huangjuhua
[Flex Box_-Flex_-align-self]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/33c255303c46435aa2cf08d355621707.png
[Flex Box_-Flex_-align-self 1]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/5ed4899e93ef4ecfad95fdb65b1e0ff7.png
[Flex Box_-Flex_-align-self 2]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/783722aad9954f2e86c1147516522524.png
[Flex Box_]: https://ke.qq.com/course/368348?tuin=2b10d56
[Flex Box_-Flex_-align-self 3]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/1e9ee2e7ddaf4b3c93acc8e52a2b6b67.png