uniapp微信小程序如何做到内容区和右侧胶囊对齐

template中内容如下

<view class="headerBox" :style="'top:' + statusBarHeight + 'px;height:' + titleHeight + 'px'">

 data中需要声明

titleHeight: 0,        // 内容区的高度
statusBarHeight: 0,    // 状态栏

 onLoad的中

uni.getSystemInfo({
    success: res => {
        this.statusBarHeight = res.statusBarHeight
    }
})
let menuButtonInfo = uni.getMenuButtonBoundingClientRect()
this.titleHeight = ((menuButtonInfo.top - this.statusBarHeight) * 2) + menuButtonInfo.height

css中

.headerBox {
    display: flex;
    align-items: center;
}