界面设计：view和button和image 图标总是掐架跑位怎么办？
初级码工一枚，先祭出设计稿（美好的愿望） [图片] 现在的状态： [图片] 想要让+再向左边挪一点，ListNum向右边挪一点 无能为力。 当我只是把view和image掉了个上下顺序之后： [图片] 求助：view组件在wxss里设计宽度无效，在size里设计宽度无效，只有两个图标的时候也是各种魔幻排列，使用justify-content没办法阻止~到底能怎么办？？？ wxml源代码： 好像总是被吞…… [图片]
/button>
/image>
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}}
