Page{
 width: 100%;
 height: 100%;
}
.root{

 padding: 20rpx;
 display: flex;
 height: 100%;
 box-sizing: border-box;
 flex-direction:column;
align-items: center;
}
.top{
  width:100%;
 flex: 1;
display: flex;
 flex-direction:column;
 align-items: center;


}

.my-box .block {
  width: 49.6%;
  padding-top: 40rpx;
  padding-bottom: 40rpx;
  min-height: 100px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-right: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
}
.image{
 width:100%;
 display: flex;
 background: #f00;
 border-radius:20rpx;

 height: 50vw;
}

wxml

<view class="root">
<view style="flex:1;height:100%;" class="top" >
<image class="image">{{image}} </image>
<view>当前金额:{{money}}</view>
</view>


<button class="button" type="primary" bindtap='onSubmit' style='width:100%'>购买并赠送</button>

</view>

这里要生效就必须设置宽度100%否则都行不通，这样就可以打造类似安卓这样的布局了。也就是padding算在里面。

bug

在scroll-view 作为top布局的时候，里面的width:100%没卵用了，宽度被压扁，
原因 貌似是top scrollview属性里面不能加上align-items: center;删除就又正常了。