综合教程

微信小程序flex box界面设计入门到精通-13课-Flex项目的属性-align-self垂直对齐

时间:2019/1/6 11:32:26  作者:互联网  来源:网络转载  查看:56360  评论:0
内容摘要:基础语法align-self属性允许单个项目有与其他项目不一样的对齐方式,可覆盖align-items属性。默认值为auto,表示继承父元素的align-items属性,如果没有父元素,则等同于stretch。.item { align-self: auto | flex-sta...

基础语法

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

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

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


  微信小程序flex_box界面设计入门到精通-13课-Flex项目的属性-align-self垂直对齐



小程序应用

默认代码和效果

效果如图

微信小程序flex_box界面设计入门到精通-13课-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界面设计入门到精通-13课-Flex项目的属性-align-self垂直对齐

下面我们设置01区块的align-self的值为flex-end02区块的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://ke.qq.com/course/368348?tuin=2bea1eb0
微信小程序flex_box界面设计入门到精通-01课-概述

相关评论
评论者:      验证码:  点击获取验证码
咨询QQ/微信:45157718 点击这里给我发消息 | 电话:13516821613 | 浙江杭州余杭区东港路118号雷恩科技创新园 | 网站支持:杭州摇亿网络科技 | 浙ICP备06056032号-6 |