微信小程序样式Flex Box精通课程-Flex容器的属性-align-items(上中下对齐)
align-items(上中下对齐)
基础语法
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
效果如图
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
效果如图
小程序应用:wxml代码沿用上小节
Wxss代码
.zong{
display: flex;
justify-content: space-around;
align-items: flex-end;
/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */
}
align-items: center
效果如图
小程序应用:wxml代码沿用上小节
Wxss代码
.zong{
display: flex;
justify-content: space-around;
align-items: center;
/*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */
}
align-items: baseline
效果如图
小程序应用: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 */
}
效果如图
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;
}
效果如图
可以看到01这个区块的高度自动扩展为整个容器的高度。
微信小程序样式Flex Box精通课程 https://edu.****.net/course/detail/10624