flex 均分铺满


<view>充值金额</view>
<view class="weui-flex">
<repeat for="{{amountTab.amountType}}" key="index" index="index" item="item">
<view class="amount-item" @tap="onTap" data-key="currentType" data-val={{index}}>
<view class=" {{index===amountTab.currentType ? 'amount-item_select-after' :''}}">
<view>
<view class="amountType-gift">{{index===0 ? ' ': '送'+item[1]+'币'}}</view>
<view class="amountType-exchange-rate">
<!-- 官方不建议span -->
<text>{{item[0]}}</text><text>元</text>=<text>{{item[0]+item[1]}}</text><text>币</text>
</view>
</view>
</view>
</view>
<view class="{{index%2===0 ? 'amountType-separation': ''}}"></view>
</repeat>
</view> .weui-flex {
display: flex
} // https://weui.io/weui.css
.amount-item {
display: inline-flex; // 父已经去除padding
@2items_padding-width : @wx-width_subtract-padding-width*0.05; // 并排的2个选项区域的外围边框border;
@item-separation-margin-width: 0.05; // 2个选项横排;选项margin水平间距;
@item-border-width: @common_border-width; // 2个选项的border宽度;
@item-available-width: @wx-width_subtract-padding-width*(1- @item-separation-margin-width) - @2items_padding-width*2 - @item-border-width*4; // 待布局选项区域;
@items_width-share: 0.9; // 选项宽度份额,其他留作2个选项间的水平margin;使用margin的原因是项有边框;
@item-margin-width: @item-available-width*(1- @items_width-share)/4; // 2个选项之间的margin宽度;
@item-render-width: @item-available-width*@items_width-share/2; // 选项最终被渲染的宽度;
// @item-render-height: @item-render-width/@item-width-divide-height; // 保持选项宽高比,选项最终被渲染的高度;
@item_select-after-font-size: @common_select-after-font-size;
border: @common_border-width solid @color-main_gray;
width: @item-render-width;
.amountType-separation {
margin: 0 @item-separation-margin-width*@wx-width_subtract-padding-width;
}
.mixin-block-float(@f: right) {
display: block;
float: @f;
}
.amountType-gift {
.mixin-block-float(@f: right);
background-color: @color-main_red;
border-radius: 20% 0 0 30%;
color: #fff;
font-size: 80%; //TODO exact
}
.amountType-exchange-rate {
.mixin-block-float(@f: left);
@v: 700;
text:nth-last-child(2) {
color: @color-main_red;
font-weight: @v;
}
text:nth-child(1) {
font-weight: @v;
}
}
}
.amount-item_select-after {
border: @common_border-width solid @color-main_blue;
&:after {
.mixin-item_select-after(@font-size: @common_select-after-font-size, @margin-top: @common_select-after-font-size);
}
}
flex 均分铺满
flex 均分铺满的更多相关文章
- Unity2D 背景图铺满与Camera.Size的计算公式
在unity制作2D游戏的教程,背景图sprite铺满显示时Camaer的Size调到多少合适,作个笔记. 资源参数 background.png 2048x640,Sprite的像素单位:100 调 ...
- ExtJS-Viewport背景图片铺满浏览器视图并自动伸缩
var viewport = Ext.create('Ext.container.Viewport', { style : 'background-image:url(login_bj.jpg);ba ...
- iOS- 解决iOS10 App启动时放大铺满App Icon的问题
0.前言 iOS10 App启动时放大铺满App图标 iPad Application shows app icon as launch screen in iOS 10 如图,点击APP后APP图标 ...
- js控制图片自动缩放,实现铺满盒子,不变形,完全局中
此js一般用于控制图片铺满盒子,但是比例不变,并且绝对局中原理:判断图片的高宽与盒子高宽的大小的关系,然后通过比例来控制图片的缩放及定位<!DOCTYPE html PUBLIC "- ...
- 设置ImageView显示的图片铺满全屏
转自:http://m.blog.csdn.net/blog/wjwj1203/32334459 为适应不同屏幕的手机,ImageView显示的图片可能不铺满屏幕,如果定高的话,两边可能会出现空白 ...
- video作为背景全屏铺满问题
项目中我打算使用一个MP4视频作为登录界面背景,首先在静态页面都没法显示出来,后来发现需要将视频的编码格式转换为H264的格式方能正常显示(使用格式工厂转换即可): 后又发现视频没办法铺满全屏,在不同 ...
- 【QT】QPixmap在Label中自适应大小铺满
KeepAspectRatio:设置pixmap缩放的尺寸保持宽高比. setScaledContents:设置label的属性scaledContents,这个属性的作用是允许(禁止)label缩放 ...
- html盒子铺满全屏
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...
- android设置GridView高度自适应,实现全屏铺满效果
使GridView每个item的高度自适应拉伸,达到整个GridView刚好铺满全屏的效果. public static void setGridViewMatchParent(GridView gr ...
随机推荐
- Android-RelativeLayout布局技巧(一)
如果有一个需求是这样的,在标题中的右上角有一个button <?xml version="1.0" encoding="utf-8"?> <L ...
- (一)Oracle学习笔记—— 表和表空间
1. 表空间 一个数据库可以有多个表空间,一个表空间里可以有多个表.表空间就是存多个表的物理空间:可以指定表空间的大小位置等. 1.1 创建表空间语句 create tablespace ts3 d ...
- 在Window系统中使用Redis缓存策略
Redis是一个用的比较广泛的Key/Value的内存数据库,新浪微博.Github.StackOverflow 等大型应用中都用其作为缓存,Redis的官网为http://redis.io/. 最近 ...
- SVN环境搭建(1)
原文地址:http://www.penglig.com/post-72.html Subversion 是优秀的版本控制工具,其具体的的优点和详细介绍,这里就不再多说. 首先来下载和搭建 SVN 服务 ...
- rsync for windows 详细使用教程
rsync for windows 详细使用教程内容简介:rsync在windows与windows服务器之间的同步设置 1.准备两台机器: server-----192.168.0.201 clie ...
- 文件打开的过程——调用fd=open()时操作系统所做的工作
fd=fopen()是一个系统调用.用于依据文件名称打开一个文件.返回该文件的文件描写叙述符,文件打开后进程便能够依据文件描写叙述符fd进行其它操作,比方读,写,关闭等操作. 各个操作系统打开文件的过 ...
- Atitit.常用语言的常用内部api 以及API兼容性对源码级别可移植的重要性 总结
Atitit.常用语言的常用内部api 以及API兼容性对源码级别可移植的重要性 总结 1.1. 要兼容的重要语言api1 1.2. 常用基础api分类 core api1 1.3. 比较常用的扩展库 ...
- 在modelsim中加入quartus仿真库
找到modelsim安装目录下的modelsim.ini文件. 将modelsim.ini的只读属性去掉. 打开quartus软件.选择Launch Simulation Library Compil ...
- Angularjs学习笔记2_添加删除DOM元素
1.调用element方法 angular.element(html) 把字符串或dom对象转化成一JQuery对象, angular.element(document.getElementB ...
- python 学习方法
依据本人的学习经验,我总结了下面十点和大家分享: 1)学好python的第一步.就是立即到www.python.org站点上下载一个python版本号.我建议刚開始学习的人,不要下载具有IDE功能的集 ...