当前阅读教程:Flex Box小程序应用 > 子元素的对齐(align-self) | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: flex综合属性设置 | 下一篇: 对齐和居中(margin) |
align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。示意图如7-41所示。 默认值为auto,表示继承父元素的align-items属性,如果没有父元素则等同于stretch。代码示例 如下: .item { align-self: auto | flex-start | flex-end | center | baseline | stretch; } 1.默认代码和效果.wxml文件代码示例 如下: <view> <view> <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; } 效果如图7-42所示。 下面我们设置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; } 效果如图7-43所示。 |
|
上一篇: flex综合属性设置 | 下一篇: 对齐和居中(margin) |