How do I create this layout in Flexbox? - css

Question

I'm trying to create this layout in Flexbox (and React Native) but I can't get it to work. Specifically, the Left and Right buttons refuse to expand to 50% of the width of the container no matter what I do. They are always the size of their content.
I'm using nested containers. The buttons are in a columnar Flex container which is nested in a row Flex container that also contains the image.
Here is my 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>
All replies are much appreciated...

Answer 1

Maybe this will help you:
.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>
If you ever have issues with using flexbox, use this resource, it's really helpful for solving flexbox issues. Hopefully you can solve your problem now.

Answer 2

You dont want to use height properties, but using it is a good way to achieve what you want. Here is an example:
You set the image to 90% of the screen height and the buttons container to 10%.
Each button has 50% width
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%;
}
Check the example working - https://codepen.io/kaiten/pen/YaYqZO

Answer 3

In consideration of the fact that your code is required in react-native and not react, try this piece of code
<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>
Explanation : In react-native you do not need to mention display:flex in your styles since react-native always uses flexBox. When you do flex:1 your container always takes the 100% of the width and the height of it's parents hence doing flex:1,height:'100%',width:'100%' is invalid.
In your
<View style={{
display: 'flex',
flexDirection: 'row',
flex: 0,
width: '100%',
height: 100}} >
you've done flex:0 so this is the equivalent of width:'0%',height:'0%'
Hope this gives you some clarity on the code required.
PS: There might be a possibility that the code i wrote might not work properly due to the <Image> width and height. For eg : If the height of the image decreases and you've given fixed height to your buttons then there might be some white space below your buttons since the height of the <Image> plus the height of the <Button> will not add up to the height of the screen visible.

Answer 4

It seems like Button component do not take style as prop if we look at the codebase of React Native. So the problem is button is not accepting style. So I wrapped button with a view.
Here is sample of working code:
<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>