微信小程序 —— 多个view左右对齐的巧用方法(display:flex布局)

在以前写web端代码的时候,遇到俩个,三个的div平铺在一个大div中我都会用“width: 50%;display:inline-block;”这种方法来搞定,但是这样的写法很low,而且会经常有一种情况出现:

    左边右边总有一个不能很好的对称

这里写图片描述

但是现在有简单一个方法,可以解决这个问题:
这里写图片描述

在最外层的view(div)中加“ display: flex; ”
.free-all{
  display: flex;
}
.free-all>view{
    width:50%;
    display: inline-block;
}

display:flex 多栏多列布局浏览器支持情况:火狐直接支持w3c无前缀写法,谷歌和opera支持-webkit- 前缀写法,比较适合移动端开发使用。

flex-flow: row; row横向(左向右)显示
flex-flow: column; column竖向(上向下)

例子 :即使"width:50%;display:inline-block;"在外层view加上"flex-flow: column;"依旧是竖向显示;

这里写图片描述

.free-all{
  display: flex;
  flex-flow: column;
}
  • 6
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值