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

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?

CodePudding user response：

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

CodePudding user response：

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