综合教程

微信小程序flex box界面设计入门到精通-06课-flex容器属性-align-items(垂直对齐)

时间:2019/1/6 10:41:19  作者:互联网  来源:网络转载  查看:56377  评论:0
内容摘要:基础语法align-items属性定义项目在交叉轴上如何对齐。(上中下).box { align-items: flex-start | flex-end | center | baseline | stretch; }它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交...

基础语法

align-items属性定义项目在交叉轴上如何对齐。(上中下)

微信小程序flex_box界面设计入门到精通-06课-flex容器属性-align-items(垂直对齐)

.box { align-items: flex-start | flex-end | center | baseline | stretch; }

它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。

 flex-start:交叉轴的起点对齐。
 flex-end:交叉轴的终点对齐。
 center:交叉轴的中点对齐。
 baseline: 项目的第一行文字的基线对齐。
 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。



小程序应用

align-items: flex-start

效果如图
微信小程序flex_box界面设计入门到精通-06课-flex容器属性-align-items(垂直对齐)
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;

  align-items: flex-start;/*默认值是stretch,属性值有:flex-start | flex-end | center | baseline | stretch */

}

.fangxing1{

  width: 60px; height: 60px; 

  background-color:  beige;

}

.fangxing2{

  width: 30px; height: 30px; 

  background-color:  beige;

}

.fangxing3{

  width: 90px; height: 90px; 

  background-color:  beige;

}

 

align-items: flex-end

效果如图

微信小程序flex_box界面设计入门到精通-06课-flex容器属性-align-items(垂直对齐)

小程序应用:wxml代码沿用上小节
Wxss代码

.zong{

  display: flex;

  justify-content: space-around;

  align-items: flex-end;

/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */

}

 

 

align-items: center

效果如图

微信小程序flex_box界面设计入门到精通-06课-flex容器属性-align-items(垂直对齐)

小程序应用:wxml代码沿用上小节
Wxss代码

.zong{

  display: flex;

  justify-content: space-around;

  align-items: center;

/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */

}

align-items: baseline

效果如图
微信小程序flex_box界面设计入门到精通-06课-flex容器属性-align-items(垂直对齐)

小程序应用:wxml代码沿用上小节
Wxss代码

.zong{

  display: flex;

  justify-content: space-around;

  align-items: baseline;

/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */

}

 

 

align-items: stretch

小程序应用:wxml代码沿用上小节

Wxss代码

.zong{

  display: flex;

  justify-content: space-around;

  align-items: stretch;

/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */

}

效果如图
微信小程序flex_box界面设计入门到精通-06课-flex容器属性-align-items(垂直对齐)
stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。我们下面看下不设置01这个区块的高度,效果如何。

小程序应用:wxml代码沿用上小节

Wxss代码

.zong{

  display: flex;

  justify-content: space-around;

  align-items: stretch;

/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */

}

.fangxing1{

  background-color:  beige;

}

.fangxing2{

  width: 30px; height: 30px; 

  background-color:  beige;

}

.fangxing3{

  width: 90px; height: 90px; 

  background-color:  beige;

}

效果如图
微信小程序flex_box界面设计入门到精通-06课-flex容器属性-align-items(垂直对齐)
可以看到01这个区块的高度自动扩展为整个容器的高度。


欢迎大家支持我的视频课程:微信小程序样式Flex Box精通课程
https://ke.qq.com/course/368348?tuin=2bea1eb0
微信小程序flex_box界面设计入门到精通-01课-概述

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