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

【问题标题】：Changing flex-direction property on a form?更改表单上的 flex-direction 属性？
【发布时间】：2017-07-26 04:52:30
【问题描述】：

好的，我正在尝试使用 flexbox 创建如下所示的列堆叠布局。我得到了那个工作：http://imgur.com/a/N9NHD

问题一：左右有边距我不明白为什么？

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

【问题讨论】：

第一个问题：请删除“padding: 1rem;”从“contact-us-section”类并尝试..
请查看并评论我的回答，如果有不清楚或遗漏的地方，请告诉我。如果不是，那么如果您能接受对您帮助最大的答案，那就太好了。

标签： html forms css flexbox

【解决方案1】：

问题1：左右有边距我不明白为什么？

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

问题 2：在大屏幕中，我希望输入和标签在旁边并排，所以我在 .form-row 上使用 flex:row 应该使标签和输入在同一行。不工作有什么想法吗？

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

fieldset 元素不能是 flex 容器，因此要么添加一个额外的包装器（我在下面的示例中这样做）或更改元素类型。
form-row/fieldset 的规则 屏幕宽度 768 px 需要与初始设置相同（或更高）的特异性，否则不会申请。

请注意，当屏幕变宽时，表单元素似乎有些不对齐，我没有更改任何内容，因为我不知道您希望它如何布局

堆栈sn-p

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

【讨论】：

【解决方案2】：

此代码将满足您在所附图片https://imgur.com/a/N9NHD 中显示的要求。您可以根据您的要求为 768px 屏幕自定义和添加 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>

希望对你有帮助:)

【讨论】：