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 ...
随机推荐
- <四>读<<大话设计模式>>之代理模式
代理模式我想大家即便不熟悉也都听过吧,从字面意思上看就是替别人干活的,比方代理商.在项目的实际应用中也有非常多地方用到.比方spring通过代理模式生成对象等. 代理模式的书面定义:为其它对象提供一种 ...
- WP8控件进度条(ProgressBar)的使用
--前台代码 <Grid x:Name="ContentPanel" Grid.Row="1" Margin="0,0,24,0"& ...
- Quartz简介 用 Quartz 进行作业调度
http://www.ibm.com/developerworks/cn/java/j-quartz/现代的 Web 应用程序框架在范围和复杂性方面都有所发展,应用程序的每个底层组件也必须相应地发展. ...
- Cookie的增删改查
增加: 第一种方法:Response.Cookies[“UserName”].Value=”张三” Response.Cookies[“UserName”].Expires=DateTime.Now. ...
- Python pip install Twisted 出错“Command "c:\python37\python.exe -u -c "import setuptools, tokenize;__file__='C:...\\Twisted\\setup.py'.... failed with error code 1 in C:... \\Twisted"
如标题所说: python版本是目前最新的3.7.1 结果发现并不是环境问题,而是直接 pip install Twisted 安装的包不兼容 需要手动下载兼容的扩展包Twisted-18.9.0-c ...
- C++ 内存泄漏
1. 内存泄漏: 在计算机科学中,内存泄漏指由于疏忽或错误造成程序未能释放已经不再使用的内存的情况. 内存泄漏并非指内存在物理上的消失,而是应用程序分配某段内存后,由于设计错误,导致在释放该段内存之前 ...
- linux 系统下MySQL5.7重置root密码(完整版,含ERROR 1820 (HY000)解决方案)
mysql的root密码忘记了怎么重置? 往下看: 1.保证你的mysql服务处于关闭状态.(用ps -ef | grep mysql 查看进程,有则kill -9 进程号) 2.在my.cnf所在目 ...
- Atitit.eclipse comment template注释模板
Atitit.eclipse comment template注释模板 1. Code templet1 1.1. Settpath1 1.2. 设置存储1 1.3. 导出设置1 2. Java d ...
- iOS开发正则表达式的学习
正则表达式笔记 每天的一小步,知道我在不断进步,这就是我每天的小目标. 这是我的第一篇博客,在工作之余,我会努力地留下些许脚印. 我是一名iOS开发者,对于iOS我仅仅只是一个菜鸟,愿意在此处留下我的 ...
- hdu5794 A Simple Chess 容斥+Lucas 从(1,1)开始出发,每一步从(x1,y1)到达(x2,y2)满足(x2−x1)^2+(y2−y1)^2=5, x2>x1,y2>y1; 其实就是走日字。而且是往(n,m)方向走的日字。还有r个障碍物,障碍物不可以到达。求(1,1)到(n,m)的路径条数。
A Simple Chess Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)To ...