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

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

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

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

但是现在有简单一个方法,可以解决这个问题:
微信小程序 —— 多个view左右对齐的巧用方法(display:flex布局)_第2张图片

在最外层的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;"依旧是竖向显示;

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

.free-all{
  display: flex;
  flex-flow: column;
}

你可能感兴趣的:(微信小程序)