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

 时间:2024-10-12 06:48:07

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的样式表文件,首先给clas衡痕贤伎s为outter的标签设置样式,在里面添加display: flex;justify-content: space-between;//表示将里面的元素紧紧挨在两边。

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

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

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

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

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

8、总结:1、新建一个vie嘛术铹砾w标签,并且加上class,命名为outter2、里面新建两个view标签,class命名为innner3、在wxss写样式,为outter添加flex布局,并使用justify-content。4、模拟器中预览效果。

微信小程序flex布局的justify-content怎么用
  • miui13系统怎么开启nfc功能
  • qq浏览器禁止重定向
  • 手机游戏电脑模拟器怎么设置键盘多点操作?
  • 小米手机相册防误删如何打开
  • 热门搜索
    三年级环保手抄报 邪教手抄报 低碳生活我先行手抄报 圣诞节的手抄报 宪法手抄报大全一等奖 数学手抄报资料 简单漂亮元旦节手抄报 元宵节手抄报简单好看 春节手抄报图片大全简单又漂亮 童话手抄报图片