如何使用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>

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

- Barry Fruitman

---

看起来 Dimensions 可能适合你：https://dev59.com/WlwX5IYBdhLWcg3w2iku#33312563 - serraosays

谢谢，但那真的是正确的方法吗？难道没有一种方法可以将按钮宽度设置为容器的50％，而不必担心屏幕宽度吗？ - Barry Fruitman

有什么阻止你使用flexBasis的吗？... - Facundo Corradini

@FacundoCorradini 我尝试使用了几个flexBasis值，但都没有起作用。你能建议一个具体的值吗？此外，我在按钮容器中使用了“flex: 0”，这会有影响吗？任何其他值都会搞乱垂直分布。 - Barry Fruitman

尝试在按钮中使用flexBasis:50和flex:1。 - Facundo Corradini

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问题非常有帮助。希望现在您可以解决问题了。

- Willem van der Veen

Answer 2

你不想使用高度属性，但使用它是实现你想要的效果的好方法。这里有一个例子：

你将图像设置为屏幕高度的90％，按钮容器设置为10％。

每个按钮的宽度为50％

HTML

<div class="container">
  <div class="image"></div>
  <div class="buttons-container">
    <button>Action 1</button><button>Action 2</button>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
}

body, html {
  height: 100%;
  margin: 0;
}


.container {
  position: relative;
  width: 100%;
  height: 100%;

}

.container .image {
  width: 100%;
  height: 90%;
  background-image: url('path/to/image');
  position: relative;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

}

.container .buttons-container {
  display: flex;
  height: 10%;
}

.container .buttons-container button {
  width: 50%;
}

检查示例是否正常工作 - https://codepen.io/kaiten/pen/YaYqZO

- shoxton

Answer 3

从React Native的代码库来看，似乎Button组件不接受style属性。因此，问题在于Button无法接受样式。因此，我将Button包装在一个View中。

以下是工作代码示例：

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

- Sachin Agarwal

Answer 4

考虑到您的代码需要在React Native而不是React中使用，请尝试使用以下代码片段。

<View style={flex:1}>
  <Image source={require(path)} style={flex:1}>
  <View style={flex:1}>
    <View style={flex:1}>
      <Button style={flex:1,height:100} title='Left'/>
    </View>
    <View style={flex:1}>
        <Button style={flex:1,height:100} title='Right'/>
    </View>
  </View>
</View>

解释：在React Native中，您不需要在样式中提及display:flex，因为React Native始终使用flexBox。当您使用flex:1时，您的容器始终占用其父级的100％宽度和高度，因此执行flex:1，height:'100%',width:'100%'是无效的。

在您的

<View style={{
        display: 'flex',
        flexDirection: 'row',
        flex: 0,
        width: '100%',
        height: 100}} >

你已经使用了 flex:0，这相当于 width:'0%',height:'0%'

希望这能让你对所需的代码有一些清晰的认识。

附注：由于 <Image> 的宽度和高度可能会导致我编写的代码无法正常工作。例如：如果图像的高度减小，并且您为按钮指定了固定高度，则在您的按钮下方可能会有一些白色空间，因为 <Image> 的高度加上 <Button> 的高度不会添加到屏幕可见高度。

- Yash Kalwani