フォームのフレックス方向プロパティを変更しますか？

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

問題2：大画面でIを入力し、ラベルが横並びになりたいので、私はフレックスを使用：行と同じにラベルと入力ラインアップをしなければならない.form-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：大画面でIを入力し、ラベルが並んで になりたいので、私はフレックスを使用します。最大で ラベルを作る必要があります.FORM行上の行入力ライン同じ行。何のアイデアはありませんか？ fieldset要素がフレックスコンテナなるので、余分なラッパー（私はサンプルの下でやっている）または変更要素を追加することはできませんいずれか

1. ：2次の問題によって引き起こされる

タイプ。

form-row/fieldsetためのルール画面幅768ピクセルは、初期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 > 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添付の写真に示されているあなたの要件を満たすだろう。必要に応じて、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{ 
 
\t width: 50%; 
 
} 
 

 
.contact-us-section fieldset { 
 
    text-align: center; 
 
    width: 100%; 
 
} 
 
.contact-us-section label { 
 
\t 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 { 
 
\t text-align: center; 
 
} 
 
.messagebox textarea{ 
 
    width: 100%; 
 
} 
 

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

 
#submit-btn input{ 
 
\t 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>

は、それが役立ちます:)