html - 更改表单上的 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

Problem 1: there is a margin left and right I dont understand why?

您发布的代码中没有这样的边距。

Problem 2: In large screen I want the input and the label to be side by side, so I use flex:row on the .form-row which should make the label and the input line up on the same line. Not working Any ideas?

这是由以下两个问题引起的:

1. fieldset 元素不能是 flex 容器，因此要么添加额外的包装器(我在下面的示例中这样做)，要么更改元素类型。

2. 当 SCREEN WIDTH 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>