ディスプレイを適用：フォームにフレキシブル

Question

私はディスプレイを適用しようとしています：このフォームにフレックスし、失敗しています。 HTMLの構造を変更することはできませんし、私の人生のためにそれについて行く方法を見つけることができません。 ボタンを含むすべてのインラインの唯一の方法は、と .form-fieldsの両方にflexを適用することです。しかし、フォームがラップすると、ボタンは最初の行に残り、最後の名前の入力フィールドは2番目の行に残ります。

私は間違っていますか？そして、HTMLに触れることなく、CSSだけで何ができますか？ありがとうございました！

form, .form-fields { 
 
    display: flex; 
 
}

<div class="form"> 
 
    <form> 
 
    <div class="form-body"> 
 
     <ul class="form-fields"> 
 
     <li class="form-field"> 
 
      <div class="input-container"> 
 
      <span class="name_first"> 
 
       <input type="text" name="first_name" id="first_name" value="" placeholder="First Name *" required=""> 
 
      </span> 
 
      <span class="name_last"> 
 
       <input type="text" name="last_name" id="last_name" value="" placeholder="Last Name *" required=""> 
 
      </span> 
 
      </div> 
 
     </li> 
 
     <!-- name and last name --> 
 

 
     <li class="form-field"> 
 
      <div class="input-container"> 
 
      <input name="email_address" id="email_address" type="email" value="" placeholder="Email *" required=""> 
 
      </div> 
 
     </li> 
 
     <!-- email adress --> 
 
     <li class="form-field"> 
 
      <div class="input-container"> 
 
      <input name="phone_number" id="phone_number" type="tel" value="" placeholder="Phone *" required=""> 
 
      </div> 
 
     </li> 
 
     <!-- phone --> 
 
     </ul> 
 
     <input name="action" type="hidden" value="Request an Info Sheet"> 
 
    </div> 
 
    <div class="form-footer"> 
 
     <button type="submit" class="form_button"> 
 
     <span>Contact Us</span> 
 
     </button> 
 
    </div> 
 
    <!-- button --> 
 
    </form> 
 
</div>

Answer 1

flex-wrapを追加する次の行の最後にボタンを送信します。

form, .form-fields { 
    display: flex; 
    flex-wrap: wrap; 
} 

Answer 2

私は、これはあなたが何をしたいかもしれないと思います。私がしたのは、追加：flex-direction: column;でした。

フレックスボックスのデフォルト値は、行です。それはフレックスアイテムを行にし、子供をその行に広げます。

フレックスボックスを列に設定すると、フレックスアイテムが列になり、その列に子が広がります。

はそれがお役に立てば幸いです。）

form, .form-fields { 
 
    display: flex; 
 
    flex-direction: column; 
 
}

<div class="form"> 
 
    <form> 
 
    <div class="form-body"> 
 
     <ul class="form-fields"> 
 
     <li class="form-field"> 
 
      <div class="input-container"> 
 
      <span class="name_first"> 
 
       <input type="text" name="first_name" id="first_name" value="" placeholder="First Name *" required=""> 
 
      </span> 
 
      <span class="name_last"> 
 
       <input type="text" name="last_name" id="last_name" value="" placeholder="Last Name *" required=""> 
 
      </span> 
 
      </div> 
 
     </li> 
 
     <!-- name and last name --> 
 

 
     <li class="form-field"> 
 
      <div class="input-container"> 
 
      <input name="email_address" id="email_address" type="email" value="" placeholder="Email *" required=""> 
 
      </div> 
 
     </li> 
 
     <!-- email adress --> 
 
     <li class="form-field"> 
 
      <div class="input-container"> 
 
      <input name="phone_number" id="phone_number" type="tel" value="" placeholder="Phone *" required=""> 
 
      </div> 
 
     </li> 
 
     <!-- phone --> 
 
     </ul> 
 
     <input name="action" type="hidden" value="Request an Info Sheet"> 
 
    </div> 
 
    <div class="form-footer"> 
 
     <button type="submit" class="form_button"> 
 
     <span>Contact Us</span> 
 
     </button> 
 
    </div> 
 
    <!-- button --> 
 
    </form> 
 
</div>