如何在 Flexbox 中创建此布局？答案

【问题标题】：How do I create this layout in Flexbox?如何在 Flexbox 中创建此布局？
【发布时间】：2018-09-06 07:16:23
【问题描述】：

我正在尝试在 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>

非常感谢所有回复...

【问题讨论】：

看起来 Dimensions 可能会为你做这件事：stackoverflow.com/a/33312563/241153
谢谢，但真的是这样吗？有没有办法将按钮宽度设置为容器的 50% 而不用担心屏幕宽度？
有什么阻碍你使用 flexBasis？...
我认为按钮样式的格式不正确。请尝试style={{ flex: 1 }}。
@FacundoCorradini 我尝试为 flexBasis 使用多个值，但没有一个起作用。你能建议一个具体的值来使用吗？另外，这比我在按钮容器中使用“flex：0”重要吗？任何其他值都会破坏垂直分布。

标签： css react-native flexbox react-native-flexbox

【解决方案1】：

如果我们查看 React Native 的代码库，似乎 Button 组件没有将样式作为道具。所以问题是按钮不接受样式。所以我用视图包裹了按钮。这是工作代码示例：

<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>

【讨论】：

【解决方案2】：

考虑到你的代码在 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%'

希望这能让您清楚地了解所需的代码。

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

【讨论】：

【解决方案3】：

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

您将图像设置为屏幕高度的 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

【讨论】：

【解决方案4】：

也许这会对你有所帮助：

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

【讨论】：