With flexbox, how can I create this easy app page loginscreen? - css

Question

I'm trying to learn how to write React Native apps and they're using Flexbox a lot to style their App screens. How can I achieve the following layout using Flexbox?
Here's the code I have so far:
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#cde9ff',
alignItems: 'center',
justifyContent: 'center',
borderWidth: 5,
},
header: {
borderWidth: 1,
fontSize: 38,
marginBottom: '50%',
},
form: {
borderWidth: 1,
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: 'black',
marginBottom: 10,
backgroundColor: 'white',
color: 'black',
borderRadius: 10,
},
footer: {
borderWidth: 1,
},
});
I was trying to do it with the margins but that's not really working so well for me right now, and I figured it be best to properly learn to utilise Flexbox whenever I can.
Does someone know how to change my Stylesheet CSS to how I can easily create the quick paint image layout I made?

Answer 1

I would do something like this, and use flex-growth to push to footer at the end of the page
For the structure :
function App() {
return (
<View style={styles.container}>
<View style={styles.header}>
<Text>Title</Text>
</View>
<View style={styles.form}>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
<View style={styles.input}></View>
</View>
<View style={styles.footer}>
<Text>Footer</Text>
</View>
</View>
);
}
For the CSS :
const styles = StyleSheet.create({
container: {
flex: 1,
flexDirection: "column",
alignItems: "center",
},
header: {
alignItems: "center",
width: "75%"
},
form: {
alignSelf: "center",
justifyContent: "center",
alignItems: "center",
width: "75%",
flexGrow: 1
},
input: {
width: 200,
height: 44,
padding: 10,
borderWidth: 1,
borderColor: "black",
marginBottom: 10,
backgroundColor: "white",
color: "black",
borderRadius: 10
},
footer: {
alignItems: "center",
width: "50%"
},
});
codesanbox : https://codesandbox.io/embed/green-cloud-ne9yt?fontsize=14&hidenavigation=1&theme=dark

Answer 2

I think that you are looking for something like this:
HTML:
<div class="main-container">
<div class="title">
<h1> Title </h1>
</div>
<div class="form">
form
</div>
<div class="cta">
login
</div>
</div>
CSS:
.main-container{
height: 600px;
display:flex;
flex-direction:column;
justify-content:space-between;
align-items:center
}
.main-container div{
border: 1px solid black;
width: 300px;
padding: 50px
}
You have to add display flex to the parent container of the divs you want to be flexible
You can check Shahriar link: https://flexbox.malven.co/ it explains flex display pretty good
codepen: https://codepen.io/MichaeIMyers/pen/WNEJpLW