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

Question

我想实现看起来像的页面

页面中间next button必须有absolute position，并且旁边有skip button文字必须以next button＆＃39为中心; s文本。 我正在努力使用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>

样式：

  nextButton: {
    backgroundColor: 'white',
    height: 52,
    width: 128,
    borderRadius: 26,
    bottom: 24,
    elevation: 1
  },
  skipButton: {
    marginRight: 20,
    fontSize: 14
  },

我知道这是react-native代码，但如果您可以使用css解决问题，我相信我可以将其转换为react-native。 注意：请仅使用flexbox

Answer 1

您可以为按钮创建一个div元素，并在其上和最后一个按钮上使用position: absolute。

.page {
  height: 100vh;
  background: #4AA1CC;
  position: relative;
}
.buttons {
  position: absolute;
  left: 50%;
  bottom: 50px;
  transform: translateX(-50%);
}
button {
  color: white;
  background: none;
  border: none;
}
.buttons button:first-child {
  padding: 15px 30px;
  width: 100px;
  background: #32D6B6;
  border: 1px solid black;
  border-radius: 30px;
}
.buttons button:last-child {
  position: absolute;
  right: -60px;
  top: 50%;
  transform: translateY(-50%);
}

<div class="page">
  <div class="buttons">
    <button>Next</button>
    <button>Skip</button>
  </div>
</div>