微信小程序布局align-item使用

2025-05-05 17:32:21

1、打开开发者工具,在项目pages文件夹下,新建mypage文件夹,并在文件夹下新建page,名为mypage,在app.json配置文件中,将mypage设为第一页面。

微信小程序布局align-item使用

3、在mypage.wxml中写代码如下:.outer{width: 600rpx;height: 800rpx稆糨孝汶;display: flex;flex-direction: row;align-items: flex-start;}.v2{width: 100rpx;height: 100rpx;background-color: rebeccapurple;}.v{width: 100rpx;height: 100rpx;background-color: rebeccapurple;}.v4{width: 100rpx;height: 200rpx;background-color: rebeccapurple;}注意align-items属性是容器用的,而且容器要设置display:flex能有效,align-items决定的是元素或元素内容在侧轴的排列。

微信小程序布局align-item使用

5、将mypage.wxss代码改为align-items: flex-end;保存代码查看效果如下图,元素横排在左下

微信小程序布局align-item使用

7、保存代码,效果如下图,内层的第四个view的内容按照flex-end排列了,说明align-items对view中内容同样有效

微信小程序布局align-item使用

9、保存代码,查看效果如下图,这次排列是保持内层view的内容在同一条基线上

微信小程序布局align-item使用
声明:本网站引用、摘录或转载内容仅供网站访问者交流或参考,不代表本站立场,如存在版权或非法内容,请联系站长删除,联系邮箱:site.kefu@qq.com。
猜你喜欢