Css Flexbox将中心与其右侧的另一个元素对齐

我想实现如下页面

有“<代码>下一个按钮>代码>，必须在页面中部的<代码>绝对位置< /代码>中，旁边有“代码>跳过按钮< /代码>，文本必须以<代码>下一个按钮< /代码>的文本为中心。 我正在努力使用flexbox实现这一点，也许有人可以帮助我。 到目前为止，我的代码是这样的

组成部分：

  <View style={{ alignSelf: 'center', position: 'absolute' }}>
    <Button
      buttonStyle={styles.nextButton}
      onPress={this._onPress}
      activeOpacity={0.9}
    >
      <Text style={styles.nextText}>NEXT</Text>
    </Button>
    <Text
      style={styles.skipButton}
      onPress={this._onSkipPress}
    >
      SKIP
    </Text>
  </View>

我知道这是

react native

代码，但如果您可以使用

css

解决它，我相信我可以将其转换为

react native

。

---

注意：请仅使用

flexbox

您可以为按钮创建一个

div

元素，并在其上以及最后一个按钮上使用

位置：绝对

.page{
高度：100vh；
背景：4AA1CC；
位置：相对位置；
}
.按钮{
位置：绝对位置；
左：50%；
底部：50px；
转化：translateX（-50%）；
}
钮扣{
颜色：白色；
背景：无；
边界：无；
}
.按钮按钮：第一个孩子{
填充：15px 30px；
宽度：100px；
背景：#32D6B6；
边框：1px纯黑；
边界半径：30px；
}
.按钮按钮：最后一个孩子{
位置：绝对位置；
右：-60px；
最高：50%；
转化：translateY（-50%）；
}

下一个
跳过

您可以为按钮创建一个

div

元素，并在其上以及最后一个按钮上使用

位置：绝对值


.page{
高度：100vh；
背景：4AA1CC；
位置：相对位置；
}
.按钮{
位置：绝对位置；
左：50%；
底部：50px；
转化：translateX（-50%）；
}
钮扣{
颜色：白色；
背景：无；
边界：无；
}
.按钮按钮：第一个孩子{
填充：15px 30px；
宽度：100px；
背景：#32D6B6；
边框：1px纯黑；
边界半径：30px；
}
.按钮按钮：最后一个孩子{
位置：绝对位置；
右：-60px；
最高：50%；
转化：translateY（-50%）；
}

下一个
跳过
完全共享code@TemaniAfif完成，但它位于
react native
share full中code@TemaniAfif完成，但它位于
react native
next按钮必须位于页面中央，skip按钮将位于其右侧。@2r83请参阅update.cool，但是你能使用
flexbox
吗？因为我的问题是使用
flexbox
onlynext按钮必须在页面中央，跳过按钮将在它的右边。@2r83请参阅update.cool，但是你能使用
flexbox
吗？因为我的问题只使用
flexbox
  nextButton: {
    backgroundColor: 'white',
    height: 52,
    width: 128,
    borderRadius: 26,
    bottom: 24,
    elevation: 1
  },
  skipButton: {
    marginRight: 20,
    fontSize: 14
  },