css - 如何在 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 时遇到问题，请使用 this resource ，对于解决 flexbox 问题确实很有帮助。希望您现在可以解决您的问题。