位置:电子教程 > Flex Box小程序应用 (如果看不到内容请使用360浏览器) 推荐学习资源
Flex Box基本概念
Flex容器的属性
Flex项目的属性
Flex布局样例
当前阅读教程:Flex Box小程序应用 > 子元素的对齐(align-self)
阅读(22555525)      收藏       赞(5685)      分享
上一篇: flex综合属性设置 下一篇: 对齐和居中(margin)

align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。示意图如7-41所示。

默认值为auto,表示继承父元素的align-items属性,如果没有父元素则等同于stretch。代码示例

小白教程网www.2d5.net

如下:

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

image.png


1.默认代码和效果

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view>
  <view>
    <text>01</text>
  </view>
  <view  class='fangxing2'>
    <text>02</text>
  </view>
  <view  class='fangxing3'>
    <text>03</text>
  </view> 
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.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所示。

image.png

下面我们设置01区块的align-self的值为flex-end02区块的align-self的值为center,其他区块不变。

.wxss文件代码示例

小白教程网www.2d5.net

如下:

.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所示。

image.png


上一篇: flex综合属性设置 下一篇: 对齐和居中(margin)
毕业设计网             广告联系QQ:45157718(微信同号)