初级码工一枚，先祭出设计稿（美好的愿望）

现在的状态：

想要让+再向左边挪一点，ListNum向右边挪一点 无能为力。

当我只是把view和image掉了个上下顺序之后：

求助：view组件在wxss里设计宽度无效，在size里设计宽度无效，只有两个图标的时候也是各种魔幻排列，使用justify-content没办法阻止~到底能怎么办？？？

wxml源代码：

好像总是被吞……

<view class="userInfo">
  <button open-type="getUserInfo" bindgetuserinfo="onGetUserInfo" class="userinfo-avatar" style="background-image: url({{avatarUrl}})" size="default">button>

    <image src="…/…/images/add2.png" class=“addList”>image>   <view class=“listNum”>ListNumber:{{ListNumber}}view> view>

wxss源代码（对应第一张模拟图）：

/**index.wxss**/
page {
  background: #fff;
  display: flex;
  flex-direction: column;
}
.userInfo {
  padding-top: 45rpx;
  height: 130rpx;
  padding-left:30rpx;
  width: 100%;
  background-color: #00819ec7;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: center;
}
.userinfo-avatar {
  width: 100rpx;
  height: 100rpx;
  border-radius: 90%;
  background-size: cover;
  background-color: #fff;
}
.userinfo-avatar[size] {
  width: 100rpx;
}
.listNum {
  flex: 3;
  margin-left: rpx;
  border: 1px solid black;/*黑框框用来定位的 稍后会删掉*/
  width: 150rpx
}
.addList {
  height: 60rpx;
  width: 60rpx;
  border-radius: 100%;
  margin: 200rpx;
}

"userInfo">
  "getUserInfo" bindgetuserinfo="onGetUserInfo" class="userinfo-avatar" style="background-image: url({{avatarUrl}})" size="default">
    "../../images/add2.png" class="addList">
  "listNum">ListNumber:{{ListNumber}}