微信小程序开发——样式wxss

首页 > 技术分享 > 微信小程序

12/21 17:16

大潇博客原创文章,转载请标明出处

本文所有代码均在微信开发工具中进行

小程序采用flex布局，我们首先要把容器设置为display:flex

1、 flex-direction
flex-direction:row 行布局

flex-direction:column 列布局

2、justify-content 弹性项目在主轴main-axis线上的对齐方式(x轴)

flex-start 靠左

flex-end 靠右

centert 居中

space-between 均匀分布

space-around 均匀分布(左右两侧都有空间)

3、align-ltems 弹性项目align-items在伸缩容器中的布局情况，定义在伸缩容器中

flex-start 页面的最上边

flex-end 页面的最下边

center 页面上下居中的位置

stretch

打赏