Flexbox将中心与右侧的另一个元素对齐[重复]

Question

我想实现看起来像的页面

它有next button，必须在页面中间的absolute position，在它旁边有skip button，文本必须以next button的文本居中。 我正在努力使用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>