応答するフォームを作成しますか？

Question

私はフォームを作成しました

フレックスボックスを使用して応答性を高めるにはどうすればいいですか？

フレックスボックスの新機能ですから、まだ作業中です。ここで

は私のHTMLです：

<div class="form"> 

    <form action="#"> 
      <div> 
        <p class="title">BORGE</p> 

        <p> 
          <label for="email">E-mail : </label> 
          <input type="email" id="email"> 
        </p> 

        <p> 
          <input type="submit" value="Register" class="btn"> 
        </p> 
      </div> 

    </form> 


</div> 

私はそれにフレキシボックスを組み込むことができますどのように任意のアイデア？

私にもJSFIDDLEを表示できる場合は、

Answer 1

/* 3- fluid textarea */ 
div + div { 
    display: flex; 
    flex-direction: column; 
} 
textarea { 
    flex: 1; /* fluid height */ 
    display: block; /* IE fix */ 
} 


/* Decoration */ 

body { 
    max-width: 1000px; 
    margin: auto; 
    padding: 1em; 
    background:rgba(0,0,0,.1); 
    color: #333; 
    font-size: 1.4em; 
    font-family: georgia, "trebuchet ms", arial, serif; 
} 

h1 { 
    margin-top: 20px; 
    margin-bottom: 40px; 
    color: #345; 
    text-shadow: 1px 1px 1px #fff; 
} 
form > div { 
    padding: 1em; 
    background: #fff; 
    border: 1px solid gray; 
    border-radius: 4px; 
} 
input, 
textarea { 
    padding: .3em; 
    border: 1px solid #555; 
    border-radius: 4px; 
    font-family: inherit; 
    font-size: inherit; 
    background: rgba(0,0,0,.02); 
} 
input:focus, 
textarea:focus { 
    outline: none; 
} 
input[type="submit"] { 
    padding: .3em 1em; 
    background: #555; 
    border: none; 
    color: #fff; 
    border-radius: 4px; 
    cursor: pointer; 
} 

私はここに答えがあると思います。

Answer 2

このコードには多くのノイズがあります。あなたが質問を提出する次回は少し物事をクリアしようとします。

2つのフォームが互いに隣り合っていると指定していないので、あなたの例のように1つだけ使用しました。あなたはCSS試したさ

body{ 
 
    font-family: 'Montserrat', sans-serif; 
 
    font-size: 20px; 
 
} 
 

 
.form{ 
 
    border: 1px solid #555555; 
 
    padding: 20px; 
 
    width: 100%; 
 
    box-sizing: border-box; 
 
    margin: 0 auto; 
 
} 
 

 
.title{ 
 
    font-size: 25px; 
 
} 
 

 
.btn { 
 
    position: relative; 
 
    vertical-align: top; 
 
    height: 40px; 
 
    width: 25%; 
 
    padding: 0; 
 
    font-size: 15px; 
 
    color: white; 
 
    text-align: center; 
 
    background: #4d4d4d; 
 
    border: 0; 
 
    border-bottom: 2px solid #d0d0d0; 
 
    cursor: pointer; 
 
    margin-left: auto; 
 
} 
 

 
input:not([type="submit"]){ 
 
    flex: 1; 
 
    padding: 10px 20px; 
 
    box-sizing: border-box; 
 
} 
 

 
p { 
 
    display: flex; 
 
} 
 

 
label { 
 
    width: 7em; 
 
    margin-right: .5em; 
 
} 
 

 
@media (max-width: 600px) { 
 
    p { 
 
    display: block; 
 
    } 
 
    input { 
 
    width: 100%; 
 
    } 
 
    
 
    input[type="submit"] { 
 
    width: 100%; 
 
    } 
 
}

<div class="form"> 
 

 
<form action="#"> 
 
\t \t <div> 
 
\t \t \t \t <p class="title">BORGE</p> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t \t <label for="first name">User Name : </label> 
 
\t \t \t \t \t \t <input type="text" id="first_name" autofocus> 
 
\t \t \t \t </p> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t \t <label for="last name"> Last name : </label> 
 
\t \t \t \t \t \t <input type="text" id="last_name"> 
 
\t \t \t \t </p> 
 
\t \t \t \t <p> 
 
\t \t \t \t \t \t <label for="email">E-mail : </label> 
 
\t \t \t \t \t \t <input type="email" id="email"> 
 
\t \t \t \t </p> 
 

 
\t \t \t \t <p> 
 
\t \t \t \t \t \t <input type="submit" value="Register" class="btn"> 
 
\t \t \t \t </p> 
 
\t \t </div> 
 

 
</form> 
 
    
 
</div>