E企盈营销工具技术服务商 热线:4006-838-530

微信小程序(3)flex布局

E企盈直播平台营销卖货系统

小程序页面可以使用类似于html的方式进行设计,鉴于小程序主要适用于移动端,所以推荐使用flex的响应式布局。 定义布局 display:flex flex容器的属性flex-direction:排列方向row:默认横向排列row-reverse :横向排列倒序colunm:纵向排列column-reverse:纵向排列倒序flex-wrap:换行规则nowrap:不换行(当元素宽度超过容器宽度,将元素宽度进行平均压缩地不换行处理方式)wrap:默认换行wrap-reverse:从下往上换行justify-content:对齐方式flex-start 默认向左对齐flex-end 向右对齐center 向中间对齐space-around 所有元素周围都被空白包围space-between 除了最边缘的元素以外 其他元素都被空白包围order:手动排序flex:元素所占宽度的比值例子wxss代码/* pages/index/index.wxss */.container{  display: flex;  /* flex-direction:column; 横纵排序设置*/  /* flex-wrap: wrap-reverse; 换行规则*/  /* justify-content: center; 对齐方式*/}.size{  width: 150rpx;  height: 150rpx;}.a{  background-color: red;  order: 1;  flex: 2;}.b{  background-color:yellow;   order: 2;   flex: 1;}.c{  background-color:rgb(174, 174, 182);  order: 3;  flex: 1;}.d{  background-color:orange;  order: 5;  flex: 1;}.e{  background-color: green;  order: 4;  flex: 1;}wxml代码!–index.wxml–view class=”container”  view class=’a size’a /view   view class=’b size’b /view   view class=’c size’c /view   view class=’d size’d /view   view class=’e size’e /view /view显示效果

赞(0) 打赏
未经允许不得转载:E企盈小程序开发-热线:4006-838-530 » 微信小程序(3)flex布局
分享到: 更多 (0)
E企盈小程序直播营销卖货系统
E企盈直播平台营销卖货系统

评论 抢沙发

E企盈小程序开发

联系我们联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏