更改表单上的flex-direction属性？

Question

好的，我正在尝试使用flexbox创建一个列堆叠布局，如下所示。我开始工作了：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;
}

问题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. SCREEN WIDTH 768 px 时form-row / fieldset的规则需要与初始设置相同（或更高）的特异性，否则它不会适用。

请注意，当屏幕较宽时，表单元素看起来有点不对齐，而且由于我不知道你想要它如何布局，我没有改变任何一个 < / p>

Stack snippet

＆＃13;
＆＃13;
/* 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%;
  }
}
＆＃13;
<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>
＆＃13;
＆＃13;
＆＃13;

Answer 2

本规范将满足您在附件https://imgur.com/a/N9NHD中显示的要求。您可以根据需要自定义和添加768px屏幕的CSS。看看：

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

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

希望有所帮助：）