当前阅读教程:Flex Box小程序应用 > 垂直对齐(align-items) | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 内容水平对齐(justify-content) | 下一篇: 各行对齐(align-content) |
align-items属性定义项目在交叉轴上如何对齐。示意图如7-22所示。 代码示例 如下: .box { align-items: flex-start | flex-end | center | baseline | stretch; } 它可能取5个值。具体的对齐方式与交叉轴的方向有关,下面假设交叉轴从上到下。 n flex-start:交叉轴的起点对齐。 n flex-end:交叉轴的终点对齐。 n center:交叉轴的中点对齐。 n baseline: 项目的第一行文字的基线对齐。 n stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。 1.align-items: flex-start.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; 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; } 效果如图7-23所示。 2.align-items: flex-end.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; align-items: flex-end; /*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */ } 效果如图7-24所示。 3.align-items: center.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; align-items: center; /*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */ } 效果如图7-25所示。 4.align-items: baseline.wxml文件代码示例 如下: <view> <view> <text>01</text> </view> <view > <text>02</text> </view> <view > <text>03</text> </view> </view> .wxss文件代码示例 如下: .zong{ display: flex; justify-content: space-around; align-items: baseline; /*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */ } 效果如图7-26所示。 5.align-items: stretch.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; align-items: stretch; /*默认值是stretch,属性值有:flex-start|flex-end|center|baseline|stretch */ } 效果如图7-27所示。 stretch(默认值):如果项目未设置高度或设为auto,将占满整个容器的高度。我们下面看下不设置01这个区块的高度,效果如何。 .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; 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; } 效果如图7-28所示。 可以看到01这个区块的高度自动扩展为整个容器的高度。 |
|
上一篇: 内容水平对齐(justify-content) | 下一篇: 各行对齐(align-content) |