微信小程序flex布局的justify-content怎么用?

2025-10-07 14:14:54

1、首先我们打开微信开发者工具

微信小程序flex布局的justify-content怎么用?

2、进入项目文件目录,打开一个wxml文件

微信小程序flex布局的justify-content怎么用?

3、在这个wxml文件中新建一个view标签class命名为“outter”。

微信小程序flex布局的justify-content怎么用?

4、然后在里面新建两个view标签,class命名为“inner”。

微信小程序flex布局的justify-content怎么用?

5、接着打开wxss的样式表文件,首先给class为outter的标签设置样式,在里面添加

display: flex;

justify-content: space-between;//表示将里面的元素紧紧挨在两边。

微信小程序flex布局的justify-content怎么用?

6、然后为里面两个class为inner的标签设置样式,设置宽和高,背景色,以及底部边框。

微信小程序flex布局的justify-content怎么用?

7、最后我们来到模拟器中,查看刚才我们所制作的效果

微信小程序flex布局的justify-content怎么用?

8、总结:

1、新建一个view标签,并且加上class,命名为outter

2、里面新建两个view标签,class命名为innner

3、在wxss写样式,为outter添加flex布局,并使用justify-content。

4、模拟器中预览效果。

微信小程序flex布局的justify-content怎么用?

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