简书链接:小程序之flex类似安卓的包裹布局
文章字数：307,阅读全文大约需要1分钟
*时间是一把杀猪刀，每当我再一次开发小程序的时候又忘得一干二净 ,每次把这些东西记混淆了,于是还是写简书吧！ *

类似

.linearlayout-horizontal-{

padding: 0 30rpx;
box-sizing:border-box;
align-items: center;
display: flex;
flex-direction:column;
}

垂直布局 内容水平居中的实现

父容器设置

1
2
3
display:flex;
flex-direction:column;/*  垂直方向布局  */
align-items: center;/* 异轴对齐 也就是说是交叉轴,  这里代表 水平对齐*/

垂直布局 上下 对齐实现

同轴对齐也就是同一个方向比如是垂直方向排列，那么 是上下居中对齐则用下面这个

1
2
3
display:flex;
flex-direction:column;
justify-content: center;

坑
console.debug(“”)新版本需要 勾选Levels ,另外不支持拼接了.
undefined!= null 因此判断类型的时候还需要判断一下是否等于null

1
2
3
4
5
6
getUserId: function () {
    // return 1;
    // console.warn("inffffffffffffffo:", typeof (this.globalData.userInfo) == "undefined", " shit" + typeof (this.globalData.userInfo) );
    return typeof (this.globalData.userInfo) == "undefined" || this.globalData.userInfo==null ? 0 : this.globalData.userInfo.userid;
  return 0;
  },
1
2
3
4
5
6
7
8
9


isLogin: function (userInfo) {
  if (typeof (userInfo) == "undefined") {//没传递参数
    userInfo = this.globalData.userInfo;
  }
  var result = userInfo != null && typeof (userInfo) != "undefined" && Number(userInfo.userid) > 0;
  return result;
},

box-border的场景
girdview 2列模式

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

.cardmenu-wrap {
    box-sizing: border-box;
    width: 50%;
    padding: 0rpx 10rpx;

}

.cardmenu {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: green;
    min-height: 140rpx;
    justify-content: center;
}

1
2
3
4
5
6
7
8
9
10
11
12
    <view class="card-container">
    <block wx:for="{{item}}" wx:key="id" wx:for-index="index" wx:for-item="bean" data-index="{{index}}" data-item="{{bean}}">
        <view class=cardmenu-wrap" style="padding-left:{{index%2==0?'10':0}}rpx;padding-top:{{index<2?'10':'0'}}rpx;">
            <view class="cardmenu" bindtap="onMenuClick" data-bean="{{bean}}">

                <text class="menu-title">{{bean.title}}</text>
            </view>
        </view>
    </block>
</view>


box-sizing: border-box;必须修饰的是cardmenu-wrap ，这样百分之50也不会导致 换行，而且不能给 cardmenu-wrap设置margin,设置padding,不会改变其自身的宽度百分之50，要设置magin又不超过百分之50只能给自己的子view,当前界面布局实现了等分间隙。