flex弹性布局，很好的解决了垂直居中的问题，上代码：

wxml:

<view class='container'>
　　<view class='item item1'>item1</view>
　　<view class='item item2'>item2</view>
　　<view class='item item3'>item3</view>
</view>
wxss:
.container{
　　width: 100%;
　　padding-top: 50rpx;
　　display: flex;
　　flex-direction: row;
　　align-items: center;
　　justify-content: space-between;
}
.item{
　　background: darkred;
　　color: #fff;
　　width: 150rpx;
　　text-align: center;
}
.item1{
　　height: 100rpx;
　　line-height: 100rpx;
}
.item2{
　　height: 150rpx;
　　line-height: 150rpx;
}
.item3{
　　height: 120rpx;
　　line-height: 120rpx;
}
效果图:

css flex布局，小程序flex布局，垂直居中完美解决的更多相关文章

  1. uniapp 小程序 flex布局 v-for 4栏展示

    注:本项目的图片资源来源于后端接口,所以使用的是v-for. 关键词:uniapp 小程序 flex布局 v-for 4栏展示 自适应 <view style="display: fl ...

  2. 微信小程序的布局css样式

    微信小程序的布局css样式width: fit-content;font-size:20px;      /*设置文字字号*/color:red;           /*设置文字颜色*/font-w ...

  3. 微信小程序开发入门学习(2):小程序的布局

    概述 小程序的布局采用了和Css3中相同的 flex(弹性布局)方式,使用方法也类似(只是属性名不同而已). 水平排列 默认是从左向右水平依次放置组件,从上到下依次放置组件. 任何可视组件都需要使用样 ...

  4. 微信小程序~Flex布局

    有一点需要注意的是,你的小程序要求兼容到iOS8以下版本,需要开启样式自动补全.开启样式自动补全,在“设置”—“项目设置”—勾选“上传代码时样式自动补全”.

  5. 小程序Flex布局

    容器属性 容器支持的属性有:display:通过设置display属性,指定元素是否为Flex布局.flex-direction:指定主轴方向,决定了项目的排列方式.flex-wrap:排列换行设置. ...

  6. 关于微信小程序<radio-group>布局排列

    微信小程序更新以后今天<radio>全部变成垂直排列了,布局乱了. 一开始尝试给外层<view>添加display:flex;flex-direction:row:未果. 后来 ...

  7. 微信小程序 Flex局部元素被挤压问题

    关于Flex布局不在此处赘述,需要了解的可以查阅官方文档:基本的布局方法——Flex布局 当使用Flex布局,想实现如下图1的效果时,代码编写如下: 图1: <!-- wxml文件 --> ...

  8. 微信小程序计算金额长度异常解决办法

    今天在做微信小程序,在测试的时候偶然出现了一些问题,如下图. 心中的一阵不爽猛然袭来,完全是搞事情哈! 然后经过一番探索,用toFixed方法搞定了,此方法是对值进行四舍五入的. 解决后点了一大堆控制 ...

  9. 小程序longpress的bug及其解决

    我的小程序中,用到一个长按修改的功能,设计是这样的,短按tap,长按longpress 但是,偶尔出现长按无效的情况.我自己都经常碰到,今天仔细研究,用半天时间反复寻找,重现,发现问题和内存或别的因素 ...

  10. 微信小程序开发——导航失效的解决办法

    异常描述: 使用 navigator 导航,各种属性配置没问题,就是点击死活不跳转. 异常分析: 遇到这种情况,要先考虑的就是当前配置的导航url,是不是已经使用在tabBar中,因为小程序对于nav ...

随机推荐

  1. python中模块的__all__详细使用

    python模块中的__all__,用于模块导入时限制,如:from module import * 此时被导入模块若定义了__all__属性,则只有__all__内指定的属性.方法.类可被导入:若没 ...

  2. 原生js点击按钮切换图片

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. layer结合art实现弹出功能

    模板 <!-- 模板 --> <script id="render-tpl" type="text/html"> <table c ...

  4. 浮点型/小数/栅格图层转为整数型arcgis操作

    有时候会遇到将32位栅格数据提取属性表的操作,但是一般此类数据都是浮点型,是无法计算得到属性表的.因此我们可以利用数据管理工具下的: 复制栅格工具,在最下面选择16位即可,看自己数据情况选择signe ...

  5. java中捕获Oracle异常

    try{ } catch (Exception e){ String msg=.getMessage(): int index= msg. toUpperCase(). indexOf("O ...

  6. Js原生封装选项卡组件

    class MyTab extends HTMLElement{ //创建一个类名MyTab constructor(){ //构造函数 super(); //指向父类构造函数,必须要有的 const ...

  7. Openstack中keystone与外部LDAP Server的集成

    openstack中keystone鉴权的用户user和password信息,通常保存在mysql数据库的keystone库: 表local_user和表password: keystone也支持外部 ...

  8. Delphi【异常捕获以及Exe调用方法方法】

    通过测试.exe程序调用dll外部方法,通过dll调用主程序.exe方法实现. Showmessage('进入方法?这里是dll里LoginElecReq');  try  ShellExecute( ...

  9. 安装Windows 和 Linux双系统(vmware) Centos7

    这里我安装的是Windows + Centos 7,如果是要安装Centos 6,步骤一样 一.安装Windows和Linux双系统需要先安装Windows然后安装Linux 解释:这里解释下为什么要 ...

  10. FreeMarker与Thymeleaf

    FreeMarker 是一个模板引擎,一个基于模板生成文本输出的通用工具,使用纯 Java 编写,FreeMarker 被设计用来生成 HTML Web 页面,特别是基于 MVC 模式的应用程序,虽然 ...