【微信小程序】组件之页面布局

小程序的flex布局

小程序建议使用flex布局进行排版
flex就是一个盒装弹性布局
flex是一个容器，所有子元素都是它的成员。

定义布局：display：flex

flex 容器的属性：

1、属性flex-direction: 排列方向。有下面四个值：

row 行，从左到右
row-reverse，从右到左。
column ：列，从上到下。
column-reverse:从下到上。

2、属性 flex-wrap：换行规则。有三个值：

nowrap ：不换行
wrap: 顺序换行
wrap-reverse：逆向换行

3、justify-content:对齐方式，有五个值：

flex-start: 向左看齐
flex-end：向右对齐
center：居中对齐
space-between：在成员元素之间留空白
apace-around：在成员元素周围包裹空白

flex容器成员的属性

order：成员之间的显示顺序。通过数字对flex容器内部的成员设置显示顺序。
flex：成员所占屏幕比例。配置每个成员元素所占行级的显示比例。

练习wxss设置如下：

/**index.wxss**/
.container{display: flex;/* flex-direction: row;  *//* flex-wrap: wrap; */justify-content: space-between;
}
.size{width: 100rpx;height: 150rpx;
}
.a{background: red;order:1;flex:1;
}
.b{background: yellow;order:5;flex:3;
}
.c{background: blue;order:3;flex:2;
}
.d{background: green;order:2;flex:1;
}
.e{background: orange;order:4;flex:1;
}

页面显示效果：

【微信小程序】组件之页面布局相关推荐

微信小程序组件与页面互相传值
微信小程序组件与页面互相传值 1.外界对组件内部传值(父传子) 组件properties属性的应用 ① 定义组件内部要接受外部的值 ② 定义页面要传输给组件内部的值 ③ 传输数据 ④ 组件内部对pro ...
微信小程序组件与页面的传参、方法调用（二）
微信小程序组件与页面的传参.方法调用使用小程序组件时经常不会只用到静态页面显示,需要一定的交互.这时候就需要知道这么传参与方法调用的了首先先放官方的文档,介绍的还是比较清楚详细,有能力的同学请直 ...
微信小程序开发之页面布局
一.概述 Flex布局又称弹性布局,在小程序开发中比较适用.网页布局(layout)是CSS的一个重点应用.布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + f ...
微信小程序组件所在页面的生命周期
一什么是组件所在页面的生命周期有时,自定义组件的行为依赖于页面状态的变化,此时就需要用到组件所在页面的生命周期. 例如:每当触发页面的 show 生命周期函数的时候,我们希望能够重新生成一个随机的 ...
微信小程序开发教程第七章：微信小程序编辑名片页面开发
前面我们更新了六篇的微信小程序开发教程,现在更新第七章:微信小程序编辑名片页面开发,(第一二章:微信小程序开发教程,第三四章:微信小程序项目结构以及配置&微信小程序首页面开发,第五章:微信小程 ...
微信小程序与web页面制作的区别
前言最近在做一个微信小程序版的个人博客,本来我还有点胆颤,毕竟也没正儿八经的去学一下,不过我之前接触过,而且web方面(网页制作)的基础还可以,所以斗胆就试一试咯,到今天为止,微信小程序页面终于算是 ...
微信小程序组件(标签)—码虫带你飞
微信小程序组件(标签) 组件文档:https://mp.weixin.qq.com/debug/wxadoc/dev/component/ 常用布局标签 <view></view&g ...
微信小程序组件库开发记录
微信小程序组件库开发记录背景前言技术选型环境搭建安装 gulp 将`scss`编译为`wxss` 压缩`wxml`,`js`,`json`文件和图片拷贝文件到另一个目录删除目录整合创 ...
android img标签属性_微信小程序组件叠加效果（如 Android 中的添加蒙层）
实现的效果如下: 可以看出这是由image组件和text组件叠加到一块组成的蒙层效果. 在小程序中实现这个效果主要用到z-index属性和position属性 z-index的使用必须是双方组件都设置 ...
微信小程序个人中心页面开发
目录微信小程序创建项目配置底部导航栏微信小程序滚动播放内容微信小程序功能中心模块开发微信小程序个人中心页面开发微信小程序获取电话号码微信小程序显示列表数据微信小程序显示分页列表微信小程 ...

【微信小程序】组件之页面布局

小程序的flex布局

定义布局：display：flex

flex 容器的属性：

1、属性flex-direction: 排列方向。有下面四个值：

2、属性 flex-wrap：换行规则。有三个值：

3、justify-content:对齐方式，有五个值：

flex容器成员的属性

练习wxss设置如下：

页面显示效果：

【微信小程序】组件之页面布局相关推荐

最新文章

热门文章