如何在Flexbox中创建此布局？

Question

我正在尝试在Flexbox(和React Native)中创建此布局,但我无法让它工作.具体来说,无论我做什么,左右按钮都拒绝扩展到容器宽度的50%.它们总是与其内容大小相同.

我正在使用嵌套容器.这些按钮位于柱形Flex容器中,该容器嵌套在一行Flex容器中,该容器也包含图像.

这是我的JSX:

  <View style={{
    display: 'flex',
    flex: 1,
    flexDirection: 'column'}}>
      <Image
        style={{flex: 1, zIndex: 1, width: '100%', height: '100%'}}
        resizeMode='cover'
        resizeMethod='resize'
        source={require('./thumbs/barry.jpg')}
      />
      <View style={{
        display: 'flex',
        flexDirection: 'row',
        flex: 0,
        width: '100%',
        height: 100}} >
          <Button style='flex: 1' title="LEFT"  onPress={() => {}} />
          <Button style='flex: 1' title="RIGHT" onPress={() => {}} />
      </View>
  </View>

所有回复都非常感谢...

Answer 1

也许这会对您有所帮助：

.container{
  display: flex;
  flex-wrap: wrap;
  width: 500px;
}

.image{
  height: 500px;
  flex-basis: 100%;
  background-color: green;
}

.button{
  box-sizing: border-box;
  flex-basis: 50%;
  height: 100px;
  background-color: red;
  border: solid 1px black;
}

<div class="container">
  <div class="image"></div>
  <div class="button"></div>
  <div class="button"></div>
</div>

如果您在使用 Flexbox 时遇到问题，请使用此资源，它对解决 Flexbox 问题非常有帮助。希望您现在可以解决您的问题。