小程序 当button遇上Flex布局
当需要将button按行排列,当超过一行时,可以换行,从左到右排列,想实现如下效果(实现的比较粗糙,能说明问题就行,呵~~~):
使用Flex布局,在设置主轴方向上对齐方式,使用justify-content属性,默认是flex-start:项目对齐主轴起点,项目间不留空隙。
所以在wxss中就不需要写了justify-content属性了
于是写如下代码:
// .wxml文件中
<view class='btns'>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
<button>按钮4</button>
<button>按钮5</button>
<button>按钮1</button>
<button>按钮2</button>
<button>按钮3</button>
</view>
// .wxss文件
.btns {
margin-top: 40rpx;
display: flex;
flex-direction: row;
flex-wrap: wrap;
}
但是得到的确实如下效果:
小程序 当button遇上Flex布局的更多相关文章
- 微信小程序开发之搞懂flex布局2——flex container
容器的概念,是用来包含其它容器(container)和项目(item). flex container——flex容器 A flexbox layout is defined using the fl ...
- 微信小程序开发之搞懂flex布局1——Flexbox
Flexbox ——弹性布局 Flexbox is a layout model for displaying items in a single dimension — as a row or as ...
- 微信小程序开发之搞懂flex布局3——Flex Item
Flex Item flex容器的子元素就是这个容器的flex item. The direct children of a Flex Container (elements with display ...
- 微信小程序开发之搞懂flex布局4——Main Axis
Main Axis——主轴 当flex-direction设置为row或row-reverse时,主轴的方向为水平方向.此时flex item为行内级元素. 当flex-direction设置为col ...
- 微信小程序开发之搞懂flex布局5——cross axis
Cross Axis——交叉轴,与Main Axis(主轴)垂直交叉. main axis is row or row-reverse the cross axis runs down the col ...
- 微信小程序简单封装图片上传组件
微信小程序简单封装图片上传组件 希望自己 "day day up" -----小陶 我从哪里来 在写小程序的时候需要上传图片,个人觉得官方提供的 Uploader 组件不是太好用, ...
- wepy小程序实现列表分页上拉加载(2)
第一篇:wepy小程序实现列表分页上拉加载(1) 本文接着上一篇内容: 4.优化-添加加载动画 (1)首先写加载动画的结构和样式 打开list.wpy文件 template结构代码: <temp ...
- 微信小程序 在canvas画布上划动,页面禁止滑动
要实现微信小程序 在canvas画布上划动,页面禁止滑动,不仅要设置disable-scroll="true",还要要给canvas绑定一个触摸事件才能生效. <canvas ...
- wepy小程序实现列表分页上拉加载(1)
使用wepy开发微信小程序商城第一篇:项目初始化 使用wepy开发微信小程序商城第二篇:路由配置和页面结构 列表页效果图: 1.新建列表页 (1)在pages里面新建一个list.wpy文件 初始代码 ...
随机推荐
- TIM—基本定时器
本章参考资料:< STM32F4xx 参考手册>.< STM32F4xx 规格书>.库帮助文档< stm32f4xx_dsp_stdperiph_lib_um.chm&g ...
- web.config中的connectionString里面应该怎么写?
2009-09-16 10:19信欣玛利 | 浏览 6068 次 网络 就是具体格式.. 谁能举个例子? asp.net 3.5的. 2009-09-16 10:40 提问者采纳 这是用来连 ...
- js 開始时间,当前时间,结束时间的比較
//開始时间不能小于当前时间 function startTimeIsBigThanTotay(startTime){ var startdate = new Date((startTime).rep ...
- sparksql 操作hive
写在前面:hive的版本是1.2.1spark的版本是1.6.x http://spark.apache.org/docs/1.6.1/sql-programming-guide.html#hive- ...
- https 单向双向认证说明_数字证书, 数字签名, SSL(TLS) , SASL_转
转自:https 单向双向认证说明_数字证书, 数字签名, SSL(TLS) , SASL 因为项目中要用到TLS + SASL 来做安全认证层. 所以看了一些网上的资料, 这里做一个总结. 1. 首 ...
- 修复安卓的bug
一直不明白listview中的复用,为什么会出现,项目多了.点击同一行的按钮,操作的不是指定行的对象. 仔细研读了代码,突然明白了.因为复用了,导致了position改变了. 伪码 if(conver ...
- 小贝_redis 高级应用-事务
redis高级应用-事务 一.redis的事务 二.redis实现事务 三.redis事务问题 一.redis的事务 事务提供了一种"将多个命令打包,然后一次性.按顺序地运行"的机 ...
- Java解析json(二):jackson
Java解析json(二):jackson 官方参考 Jackson Home Page:https://github.com/FasterXML/jackson Jackson Wiki:htt ...
- Unity3D 新版粒子系统 (Shuriken)
Shuriken粒子系统是继Unity3.5版本之后推出的新版粒子系统,它采用了模块化管理,个性化的粒子模块配合粒子曲线编辑器使用户更容易创作出各种兵分复杂的粒子效果. 创建一个粒子系统的方式有两种: ...
- Android实现时间轴
昨天群里有讨论时间轴的项目,没有接触过,以为非常吊,研究之后才知道表面都是忽悠人的,使用listview就能实现了,也没有什么新奇的东西 废话少说,直接上图 图片和文字都能够私人订制 没什么好说的,直 ...