微信小程序样式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; }
小程序应用
默认代码和效果
效果如图
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