更改表单上的flex方向属性？

Question

好的，所以我试图使用柔性盒来创建一个列堆叠的布局，如下所示。我知道了：http://imgur.com/a/N9NHD

问题1：左边和右边都有空白处，我不明白为什么？

    /* CONTACT US  SCREEN WIDTH 320PX */

.contact-us-section {
    background-color:#f8f8f8;
    padding: 1rem;

}
.contact-us-section h3 {
    font-size: 1.4rem;
    margin-bottom: 1.5rem;
}
.contact-us-section form {
    display: flex;
    flex-direction: column;
}
.contact-us-section fieldset {
    display: flex;
    flex-direction: column;
}
.contact-us-section label {
    font-size: 1.2rem;

}
.contact-us-section input {
    width: 100%;
    margin: 1rem auto;
    padding: 2rem;
}
.messagebox {
    display: flex;
    flex-direction: column;
}

#submit-btn {
    background-color: black;
    color: white;
    padding: 1rem;
    width: 80%;
    font-size: 1.4rem;
}

Problem 2：在大屏幕上，我希望输入和标签并排，所以我在.form-row上使用flex:row，它应该将标签和输入线放在同一行上。想不出什么主意？

            /* CONTACT  SCREEN WIDTH 768 px */
        .form-row  {
            display: flex;
            flex-direction: row;
        }


        .contact-us-section input {
            width: 60%;
        }
        #submit-btn {
            width: 10%;
            font-size: 1.1rem;
        }

        .messagebox {
            width: 50%;
        }

html

        <div id="contact-View" class="contact-us-section">
            <div class="contact-form-wrap">
                <h3> CONTACT US</h3>

                <form action="#">
                    <fieldset class="form-row"> 
                        <label>Name:</label>
                        <input  class="name-email" type="text" value="name"><br>    
                    </fieldset>
                    <fieldset class="form-row">
                        <label>Email:</label>
                        <input class="name-email" type="text" value="email"><br>                    
                    </fieldset>
                    <div class="messagebox">
                        <label id="message-label">Message:</label>
                        <textarea rows="10" cols="39" maxlength="200"></textarea></br>
                    </div>
                        <input id="submit-btn" type="submit" value="Submit">                    
                </form>
            </div>

        </div>  

    </div>

Answer 1

问题1:左边和右边都有空白处，我不明白为什么？

在您的张贴代码中没有这样的空白。

问题2:在大屏幕上，我希望输入和标签并排，所以我在..form row上使用了flex:row，它应该将标签和输入线放在同一行上。想不出什么主意？

这是由以下两个问题造成的：

1. fieldset元素不能是一个flex容器，所以要么添加一个额外的包装器(我在下面的示例中这样做了)，要么更改元素类型。
2. 当屏幕宽度为768 px时，form-row/fieldset的规则需要与最初的一组相同(或更高)的特异性，否则就不适用了。

注意，当屏幕更宽时，表单元素看起来有点不对齐，而且我没有更改其中的任何内容，因为我不知道您希望如何布局它。

堆栈段

​

/* CONTACT US  SCREEN WIDTH 320PX */

.contact-us-section {
  background-color: #f8f8f8;
  padding: 1rem;
}

.contact-us-section h3 {
  font-size: 1.4rem;
  margin-bottom: 1.5rem;
}

.contact-us-section form {
  display: flex;
  flex-direction: column;
}

.contact-us-section fieldset > div {       /*  change to target added wrapper  */
  display: flex;
  flex-direction: column;
}

.contact-us-section label {
  font-size: 1.2rem;
}

.contact-us-section input {
  width: 100%;
  margin: 1rem auto;
  padding: 2rem;
}

.messagebox {
  display: flex;
  flex-direction: column;
}

#submit-btn {
  background-color: black;
  color: white;
  padding: 1rem;
  width: 80%;
  font-size: 1.4rem;
}

@media (min-width: 768px) {

  /* CONTACT  SCREEN WIDTH 768 px */
  
  .contact-us-section .form-row > div {    /*  increased specificity  */
    flex-direction: row;
  }
  .contact-us-section input {
    width: 60%;
  }
  #submit-btn {
    width: 10%;
    font-size: 1.1rem;
  }
  .messagebox {
    width: 50%;
  }
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>

<div id="contact-View" class="contact-us-section">
  <div class="contact-form-wrap">
    <h3> CONTACT US</h3>

    <form action="#">
      <fieldset class="form-row">
        <div>
          <label>Name:</label>
          <input class="name-email" type="text" value="name">
        </div>
      </fieldset>
      <fieldset class="form-row">
        <div>
          <label>Email:</label>
          <input class="name-email" type="text" value="email">
        </div>
      </fieldset>
      <div class="messagebox">
        <label id="message-label">Message:</label>
        <textarea rows="10" cols="39" maxlength="200"></textarea>
      </div>
      <input id="submit-btn" type="submit" value="Submit">
    </form>
  </div>

</div>

​

Answer 2

此代码将满足您在附图https://imgur.com/a/N9NHD中显示的要求。您可以根据需要为768 to屏幕定制和添加css。看一下：

添加外部库：https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css

​

.contact-us-section {
    background-color:#f8f8f8;
    display: flex;
    justify-content: center;
}
.contact-us-section h3 {
    font-size: 1.6rem;
    margin-bottom: 1.5rem;
    font-weight: bold;
}

.contact-form-wrap{
	width: 50%;
}

.contact-us-section fieldset {
   text-align: center;
   width: 100%;
}
.contact-us-section label {
	text-align: center;
    font-size: 1.2rem;
    font-weight: bold;
    font-size: 1.3rem;
}
.contact-us-section input {
    width: 100%;
    margin: 1rem auto;
    padding: 2rem;
}
.messagebox {
	text-align: center;
}
.messagebox textarea{
    width: 100%;
}

#submit-btn {
   text-align: center;
}

#submit-btn input{
	background-color: black;
    color: white;
    padding: 1rem;
    width: 45%;
    font-size: 1.4rem;
}

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
  <div id="contact-View" class="contact-us-section">
            <div class="contact-form-wrap">
                <h3> CONTACT US</h3>

                <form action="#">
                    <fieldset class="form-row"> 
                        <label>Name:</label><br>
                        <input  class="" type="text" value="name"><br>    
                    </fieldset>
                    <fieldset class="form-row">
                        <label>Email:</label>
                        <input class="name-email" type="text" value="email"><br>                    
                    </fieldset> 
                    <div class="messagebox">
                        <label id="message-label">Message:</label><br>
                        <textarea rows="10" cols="39" maxlength="200"></textarea><br>
                    </div>
                    
                   <div id="submit-btn">
                        <input type="submit" value="Submit"> 
                   </div>                   
                </form>
            </div>

        </div>

​

希望它有帮助:)