Centering a form within a flexbox-CodePudding

I am currently doing an assignemnt for my diploma of website development.. I am struggling to get a form to be centred within a flexbox.

<div id="article_right">
                <h2>Contact Us!</h2>
                <form id="contact_form">
                    <div class="input-box">
                        <label for="contact_name">Full name:</label>
                        <input type="text" id="contact_name" name="contact_name" placeholder="Name">
                    </div>
                    <div class="input-box">
                        <label for="contact_phone">Mobile number:</label>
                        <input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
                    </div>
                    <div class="input-box">
                        <label for="contact_email">Email address:</label>
                        <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
                    </div>
                    <div class="input-box">
                        <label for="contact_message">Message:</label>               
                        <textarea rows="4" cols="40" id="contact_message" name="contact message" style="resize: none"></textarea>
                    </div>
                    <div class="button">
                        <button type="submit">Submit</button>
                    </div>
                </form>
            </div>
        </article>

/* Article Styling Definitions */
article {
    display: flex;
    flex: 3;
    background-color: transparent;
}

#article_left {
    flex: 1;
    align-content: center;
    margin-right: auto;
    background-color: aqua;
}

#article_right {
    flex: 1;
    align-content: center;
    justify-content: center;
    padding-bottom: 5px;
    background-color: transparent;
    margin-left: auto;
}

.cta {
    flex: 30;
    border: 1px solid black;
    border-radius: 5px;
    margin: 25px;
    padding-left: 5px;
}

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}


.input-box {
    padding-right: 5px;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

label {
    width: 45%;
    padding-right: 5px;
    text-align: right;
}

input, textarea {
    width: 150%;
}

I have tried everything and I just can't seem to get it to fill the right flexbox and for the form elements to be centered. The button and h2 are but the form itself won't

CodePudding user response：

It's true, just set width to <form> for example max-width:600px

CodePudding user response：

What You are doing is ok. Just try to add some width to the form, example:

https://jsfiddle.net/nk9owjyz/3/

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 50%;
}

CodePudding user response：

Just update your article css

article {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
    background-color: transparent;
}

Try Full Code

        /* Article Styling Definitions */
article {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 80vw;
    background-color: transparent;
}

#article_left {
    flex: 1;
    align-content: center;
    margin-right: auto;
    background-color: aqua;
}

#article_right {
    flex: 1;
    align-content: center;
    justify-content: center;
    padding-bottom: 5px;
    background-color: transparent;
    margin-left: auto;
}

.cta {
    flex: 30;
    border: 1px solid black;
    border-radius: 5px;
    margin: 25px;
    padding-left: 5px;
}

form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
}


.input-box {
    padding-right: 5px;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
}

label {
    width: 45%;
    padding-right: 5px;
    text-align: right;
}

input, textarea {
    width: 150%;
}

    <article id="article">
        <div id="article_right">
            <h2>Contact Us!</h2>
            <form id="contact_form">
                <div class="input-box">
                    <label for="contact_name">Full name:</label>
                    <input type="text" id="contact_name" name="contact_name" placeholder="Name" />
                </div>
                <div class="input-box">
                    <label for="contact_phone">Mobile number:</label>
                    <input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number" />
                </div>
                <div class="input-box">
                    <label for="contact_email">Email address:</label>
                    <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address" />
                </div>
                <div class="input-box">
                    <label for="contact_message">Message:</label>
                    <textarea rows="4" cols="40" id="contact_message" name="contact message"
                        style="resize: none"></textarea>
                </div>
                <div class="button">
                    <button type="submit">Submit</button>
                </div>
            </form>
        </div>
    </article>

CodePudding user response：

The problem is that you are setting article to display flex but you are setting what is to happen with the flex to its child div.

I am not absolutely sure which you want (perhaps both) but this snippet adds display flex just to the child div to at least demonstrate that something changes:

<style>
  body {
    height: 100vh;
    display: inline-block;
    width: 100vh;
  }
  /* Article Styling Definitions */
  
  article {
    height: 100%;
    position: relative;
    display: flex;
    flex: 3;
    background-color: transparent;
  }
  
  #article_left {
    flex: 1;
    align-content: center;
    margin-right: auto;
    background-color: aqua;
  }
  
  #article_right {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-bottom: 5px;
    background-color: transparent;
    margin-left: auto;
  }
  
  .cta {
    flex: 30;
    border: 1px solid black;
    border-radius: 5px;
    margin: 25px;
    padding-left: 5px;
  }
  
  form {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
  }
  
  .input-box {
    padding-right: 5px;
    display: flex;
    width: 100%;
    margin-bottom: 10px;
  }
  
  label {
    width: 45%;
    padding-right: 5px;
    text-align: right;
  }
  
  input,
  textarea {
    width: 150%;
  }
</style>

<body>
  <article>
    <div id="article_right">
      <h2>Contact Us!</h2>
      <form id="contact_form">
        <div class="input-box">
          <label for="contact_name">Full name:</label>
          <input type="text" id="contact_name" name="contact_name" placeholder="Name">
        </div>
        <div class="input-box">
          <label for="contact_phone">Mobile number:</label>
          <input type="tel" id="contact_phone" name="contact_phone" placeholder="Mobile number">
        </div>
        <div class="input-box">
          <label for="contact_email">Email address:</label>
          <input type="email" id="contact_email" name="contact_email" placeholder="E-mail address">
        </div>
        <div class="input-box">
          <label for="contact_message">Message:</label>
          <textarea rows="4" cols="40" id="contact_message" name="contact message" style="resize: none"></textarea>
        </div>
        <div class="button">
          <button type="submit">Submit</button>
        </div>
      </form>
    </div>
  </article>
</body>

You probably want to set flex-direction to get the contact us centered above the form.